Question

我正在尝试使用d3创建一个地图并绘制一些点，我找到了一些很好的例子来构建，但我相信我被卡住了。我的猜测是我没有根据数据结构的正确处理绘图点。我可以使用一些帮助 - 这是我的第一次尝试。这就是我到目前为止所拥有的：

 var m_width = document.getElementById("map").offsetWidth,
width = 938,
height = 500;

 var projection = d3.geo.mercator()
.scale(150)
.translate([width / 2, height / 1.5]);

 var path = d3.geo.path()
.projection(projection);

 var svg = d3.select("#map").append("svg")
.attr("preserveAspectRatio", "xMidYMid")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("width", m_width)
.attr("height", m_width * height / width);

 svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)


var g = svg.append("g");

 d3.json("scripts/world-110m2.json", function(error, us) {
g.append("g")
.attr("id", "countries")
.selectAll("path")
.data(topojson.feature(us, us.objects.countries).features)
.enter()
.append("path")
.attr("id", function(d) { return d.id; })
.attr("d", path)

});

svg.selectAll(".pin")
.data(places)
.enter().append("circle", ".pin")
.attr("r", 5)
.attr("transform", function(d) {
 return "translate(" + projection([
  d.earthquakes.lon,
  d.earthquakes.lat
]) + ")"
});

window.addEventListener('resize', function(event){
var w = document.getElementById("map").offsetWidth;
svg.attr("width", w);
svg.attr("height", w * height / width);
  });

＆＃34;地点＆＃34;数据结构如此

 var places = {"count":"392","earthquakes":[{"src":"us","eqid":"2010sdbk","timedate":"2010-01-31 15:18:44","lat":"-18.7507","lon":"169.3940","magnitude":"5.1","depth":"231.50","region":"Vanuatu"}

所有地方都在一个物体阵列里面＃34;地震＆＃34;里面的地方。（lon和lat特别在其中）。

世界地图显示很好，我只是难以让这些情节点起作用。非常感谢任何帮助。感谢您的阅读!!

Answer 1

你几乎拥有它，但在这里有几个问题：

1。）您传递给.data的数据应该是一个数组（添加圈子的位置）。

2.。）在你的places对象中，lat / lon是字符串，需要转换为数字。

尝试：

var places = {
   "count": "392",
   "earthquakes": [{
     "src": "us",
     "eqid": "2010sdbk",
     "timedate": "2010-01-31 15:18:44",
     "lat": "-18.7507",
     "lon": "169.3940",
     "magnitude": "5.1",
     "depth": "231.50",
     "region": "Vanuatu"
   }]
 };

 svg.selectAll(".pin")
   .data(places.earthquakes) //<-- pass array
   .enter()
   .append("circle")
   .attr("class","pin")
   .attr("r", 5)
   .attr("transform", function(d) {
     return "translate(" + projection([
       +d.lon, //<-- coerce to number
       +d.lat
     ]) + ")";
   });

示例here。

D3，绘制地图，可能的数据格式

1 个答案: