我在使用d3将点与地图上的线连接时遇到麻烦。我认为我应该使用d3.svg.line（）创建点-但是，当我这样做时，我只会得到一个很小的斑点。请查看下面的链接以获取到目前为止我已经完成的工作的屏幕截图-我想将黑点与直线连接起来。任何帮助将非常感激。
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地图样式教程III：绘制动画路径。
希望一旦您以正确的投影方式绘制了线条，它们就会如您所愿地出现。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句