d3.js地图线被打断了

Question

我正在开发d3.js地图。我在几个国家绘制点，我用弧线连接这些点。问题是有些弧被中断了。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

关于如何在不中断的情况下绘制弧线的任何想法？

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