d3js를 사용하여지도에 좌표 점을 연결할 수 있습니까?

Question

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") 

}) 

Answer 1

Screenshot 당신은 당신의 x와 y 값 별도로 각 하나를 복용하기 전에 d3.geo.mercator 객체에 좌표 당신의 두 구성 요소를 통과해야합니다.

.x(function(d) { return projection([d.lon, d.lat])[0]; }) 
.y(function(d) { return projection([d.lon, d.lat])[1]; }); 

을 대신 사용하면 '구문 분석 오류'가 사라집니다. 이 게시물의 예는 D3 map Styling tutorial III: Drawing animated paths입니다.

올바른 투영에서 선을 그려 으면 좋겠지 만 예상대로 표시됩니다.