Рисование линий между точками в d3.js

Question

Я пытаюсь провести линии между нанесенными точками, используя d3.js.

Образец GeoJSON (FeatureCollection 3 LineString): https://www.dropbox.com/s/hgkdvbnrgmb6kak/test.geojson?dl=0

Полный Existing Код: 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) 

кружках появляются, но а не линию для их соединения.

Любая помощь будет оценена!

Answer 1

Ошибка 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):

Полный рабочий код here

Надеюсь, что это поможет!