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

2023年10月4日 255次阅读

我在使用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")

})

最佳答案 您必须将坐标的两个组件都传递给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.

希望一旦你在正确的投影中绘制线条,它们就会像你期望的那样出现.

点赞