在d3.js中的点之间画线

尤基

我正在尝试使用d3.js在绘制的点之间绘制线。

范例geojson(FeatureCollection of 3 LineString):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)

出现了圆圈,但没有出现将它们连接在一起的线。

任何帮助将不胜感激!

西里尔·切里安(Cyril Cherian)

错误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); 

完整的工作代码在这里

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章