我正在尝试使用 d3.js 在绘制点之间绘制线条。
示例 geojson(3 个 LineString 的FeatureCollection): https://www.dropbox.com/s/hgkdvbnrgmb6kak/test.geojson?dl=0
完整的现有代码: https://www.dropbox.com/s/49820rs561vneti/test.html?dl=0
我遇到问题的代码块:
lines.append("g").selectAll("path")
.data(d3.entries(data.features)).enter()
.append("svg:path")
.attr("d", path)
出现了圆圈,但没有出现将它们连接在一起的线。
任何帮助将不胜感激!
最佳答案
错误1:
在你的 topojson 中。
{
"geometry": {
"type": "LineString",
"coordinates": [
[
103.79971,
1.3013115
],
[
103.8071998,
1.2932586
]
]
},
"type": "Feature",//this is wrong
"properties": {}
}
应该是:
{
"geometry": {
"type": "LineString",
"coordinates": [
[
103.79971,
1.3013115
],
[
103.8071998,
1.2932586
]
]
},
"properties": {}
}
错误2:
lines.append("g").selectAll("path")
.data(d3.entries(data.features)).enter()
.append("svg:path")
.attr("d", path)
.style("fill", "none")
.style("stroke-width", "2px")
您不能创建这样的线,要创建线,您必须使用图层并向其添加功能,如下所示(注意这些功能来自您的 test.geojson):
d3.json("test.geojson", function(data) {
layer1.features(data.features);//adding the features to the layer
map.add(layer1);
完整工作代码here .
关于javascript - 在 d3.js 中的点之间绘制线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33076875/