Question

我在使用d3将地图上的线连接起来时遇到问题。我认为我应该使用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。

希望一旦你在正确的投影中画出线条，它们就会按照你的预期出现。

如何使用d3js连接地图上的坐标点？

1 个答案: