svg - 如何使用 d3js 连接 map 上的坐标点？

Question

我无法使用 d3 将点与 map 上的线连接起来。我认为我应该使用 d3.svg.line() 来创建点 - 但是当我这样做时，我只会得到一个非常小的 blob。请参阅下面的链接以获取迄今为止我能够完成的截图 - 我想用一条线连接黑点。任何帮助将非常感激。

Screenshot

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height*3 + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var group = svg.selectAll("g")
      .data(data)
      .enter()
      .append("g")

  var projection = d3.geo.mercator().scale(5000).translate([-2000,5900]) 
  var path = d3.geo.path().projection(projection)
  var graticule = d3.geo.graticule()
  var line = d3.svg.line()
      .interpolate("linear")
      .x(function(d) { d.geometry.coordinates[0]; })
      .y(function(d) { return d.geometry.coordinates[1] ; });

      // this returns a parse error 
      // .x(function(d) { return projection(d.geometry.coordinates[0]); })
      // .y(function(d) { return projection(d.geometry.coordinates[1]) ; });

  var area = group.append("path")
      .attr("d", path)
      // .attr("d", line(data))
      .attr("class", "area")

})

Answer 1

您必须将坐标的两个组件传递给 d3.geo.mercator对象，然后将每个单独作为 x 和 y 值。如果您使用，您的“解析错误”应该会消失

.x(function(d) { return projection([d.lon, d.lat])[0]; })  
.y(function(d) { return projection([d.lon, d.lat])[1]; });

反而。这个帖子有一个更完整的例子: D3 map Styling tutorial III: Drawing animated paths .

希望一旦您在正确的投影中绘制线条，它们就会如您所愿。