2016-07-20 3 views
-1

d3.js 맵을 개발 중입니다. 저는 몇몇 국가에 점을 그렸고 그 점들을 호와 연결했습니다. 문제는 일부 호가 중단된다는 것입니다.d3.js 맵 라인이 중단되었습니다.

Interrupted arcs on map

gArcs.append("path") 
 
    .datum({ 
 
    type: "LineString", 
 
    coordinates:[ 
 
     [data.dataArray[i].long_from, data.dataArray[i].lat_from], 
 
     [data.dataArray[i].long_to, data.dataArray[i].lat_to] 
 
    ] 
 
    }) 
 
    .attr("class", "arc") 
 
    .attr("d", path) 
 
    .style({ 
 
    'stroke': lineColor, 
 
    'stroke-width':lineWidth, 
 
    })

없이 호를 그리는 방법에 대한 아이디어를 중단하기?

+0

중단 된 호가 표시되지 않습니다. 묘사 된 한 원호는 캔자스 시티와 앨리스 스프링스를 연결하는 [큰 원] (https://en.wikipedia.org/wiki/Great_circle)입니다. 선택한 위도에서 잘립니다. 그래서, 당신의 질문은 무엇입니까? – altocumulus

+0

안녕하세요 altocumulus, 난 그냥 최단 경로를 사용하지 않을 내 예제에서 아프리카에 대한 내지도에 연속 아크가 있습니다. thx – JeanMichLCarton

+0

http://grokbase.com/t/gg/d3-js/138wqyv0ac/straight-lines-on-map-in-d3-js 및 [* "d3.js의지도에 직선" *] (/ q/18493505) – altocumulus

답변

0

마지막으로, 중단 된 호를 피하기 위해 내지도에 투영 된 점으로 직선을 그리는 솔루션을 선택했습니다.

features.selectAll("path") 
    .data(data.dataArray) 
    .enter().append("line") 
    .filter(function(d) { 
    return d.country_name_from == countryNameFrom 
    }) 
    .attr("x1", function (d) { 
    return projection([d.long_from,d.lat_from])[0]; 
    }) 
    .attr("y1", function (d) { 
    return projection([d.long_from,d.lat_from])[1]; 
    }) 
    .attr("x2", function (d) { 
    return projection([d.long_to,d.lat_to])[0]; 
    }) 
    .attr("y2", function (d) { 
    return projection([d.long_to,d.lat_to])[1]; 
    }) 
    .attr("d", path) 
    .style({ 
    'stroke': lineColor, 
    'stroke-width':lineWidth, 
    })