0

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)

円は表示されていますが、それらを結ぶ線は表示されていません。

どんな助けでも大歓迎です！

4

1 に答える 1

2

間違い 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);

完全な作業コードはこちら。

于 2015-10-12T11:42:23.803 に答える