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