Question

我正在尝试在D3正交投影上实现飞行弧，类似于此示例http://bl.ocks.org/patricksurry/5735048但在D3.js V5中。

DEMO HERE：https://codepen.io/non-linear/pen/YvWrJv?editors=0010

到目前为止，我能够绘制Flying Acrs，但它们不会剪切到投影（红线），或剪切线条但没有曲线和高程（蓝线）。

var route = {
    type: "LineString",
    coordinates: [[-0.521231, 38.384714], [21.173332, 55.726208]]
};

svg.append("path")
    .datum(route)
    .attr("class", "geo flyer2")
    //.attr("d", path);
    .attr("d", function(d) {
        return swoosh(flyingArc(d));
    });

let swoosh = d3.line()
  .curve(d3.curveNatural)
  .x(function(d) {return d[0];})
  .y(function(d) {return d[1];});

function flyingArc(link) {
  // function is called on 2 different data structures..
  if (link.source) {
    var source = link.source,
        target = link.target;
  } else {
    var source = link.coordinates[0],
        target = link.coordinates[1];
  }

  var mid = projection(locationAlongArc(source, target, 0.5));
  var ctr = projection.translate();

  // max length of a great circle arc is π,
  // so 0.3 means longest path "flies" 20% of radius above the globe
  var scale = 1 + 0.5 * d3.geoDistance(source, target) / Math.PI;

  mid[0] = ctr[0] + (mid[0] - ctr[0]) * scale;
  mid[1] = ctr[1] + (mid[1] - ctr[1]) * scale;

  var result = [projection(source), mid, projection(target)];
  return result;
}

function locationAlongArc(start, end, loc) {
   var interpolator = d3.geoInterpolate(start, end);
   return interpolator(loc);
}

enter image description here

有没有办法曲线和提升蓝线或修剪红色？

如何在D3.js v5中在正投影上剪切飞弧

0 个答案: