d3.jsマップ行が中断されました

Question

私はd3.jsマップを作成しています。私はいくつかの国の点をプロットし、それらの点を円弧で結んだ。問題は、いくつかのアークが中断されていることです。

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, 
 
    })

中断されることなく円弧を描画する方法上の任意のアイデア？

Answer 1

最後に、中断したアークを避けるために、マップ上に投影された点を持つ直線を描くというソリューションを選択しました。

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, 
    })