d3.js map lines interrupted

Question

I'm developing a d3.js map. I plotted points on a few countries and I connected those points with arcs. The problem is that some arcs are interrupted.

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

Any Ideas on how to draw the arcs without getting interrupted?

Answer 1

Finally, I chose the solution to draw straight lines with projected points on my maps to avoid interrupted arcs.

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