在D3.js地图上从lat / lon投射直线的最简单方法是什么?

时间:2015-02-01 21:49:02

标签: javascript d3.js maps

我在D3.js地图上添加了几个圆圈,将它们绘制在0,0,然后使用变换将圆圈转换为正确的纬度和经度(包含在数组数据中):

var projection = d3.geo.mercator();

g.selectAll(".pin")
  .data(geo)
  .enter().append("circle", ".pin")
  .attr("r", 3)
  .attr("transform", function(d) {
    return "translate(" + projection([d.lng, d.lat]) + ")"
  });

圆圈工作正常,但我也希望在这些点之间添加短线(所有点之间的所有点),并使用相同的坐标集。

我已尝试添加如下所示的行,但不了解如何添加坐标:

var line = d3.svg.line();

g.selectAll(".lines")
  .data(geo)
  .enter().append("line", ".line")
  .attr("d", line)
  .attr("x1", ?) //Line to go from 51.50, -0.12 to 55.95, -3.18
  .attr("y1", ?)
  .attr("x2", ?)
  .attr("y2", ?);

是否可以同时设置x1y1以及x2y2,以便我可以使用projection()功能(就像我对圈子一样)?

还是有更好的方法来完成这项工作吗?

谢谢!

0 个答案:

没有答案