我在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", ?);
是否可以同时设置x1
和y1
以及x2
和y2
,以便我可以使用projection()
功能(就像我对圈子一样)?
还是有更好的方法来完成这项工作吗?
谢谢!