在 D3 符号地图上绘制连接线 ("Great Arcs")

Question

我正在使用 D3 Library and am, to this point, unable to draw connecting lines between points on a Symbol Map 的 版本 4。在示例中，从早期版本的库中，绘制连接线是使用以下代码完成的：

// calculate the Great Arc between each pair of points
var arc = d3.geo.greatArc()
  .source(function(d) { return locationByAirport[d.source]; })
  .target(function(d) { return locationByAirport[d.target]; });

[snip]

// Draw the Great Arcs on the Chart.
g.selectAll("path.arc")
    .data(function(d) { return linksByOrigin[d.iata] || []; })
  .enter().append("svg:path")
    .attr("class", "arc")
    .attr("d", function(d) { return path(arc(d)); });

评论是我的（可能是错误的），代码来自上面的符号映射示例。

在版本 4 中，d3.geo.greatArc() appears to have been deprecated in favor of d3.geoDistance(). I cannot say this for sure, but I can find no reference to greatArc in version 4. Unfortunately, I have no idea how to set up a call to geoDistance() to get the same information that greatArc() used to return. The documentation provided for geoDistance() 不足以让我了解如何使用它。

所以，我的问题是：如何使用库的版本 4 在 D3 符号图表上的点（lat/long 对）之间画线？

Answer 1

Spherical Shapes 上的文档有：

To generate a great arc (a segment of a great circle), simply pass a GeoJSON LineString geometry object to a d3.geoPath. D3’s projections use great-arc interpolation for intermediate points, so there’s no need for a great arc shape generator.

这意味着您可以通过创建包含起点和终点坐标的 GeoJSON LineString 对象来渲染大圆弧 coordinates 属性:

{type: "LineString", coordinates: [[lonStart, latStart], [lonEnd, latEnd]]}

因为这是一个标准的 GeoJSON 对象，路径生成器 (d3.geoPath) 将能够对其进行消化，并使用底层投影进行大弧插值以创建投影大弧。

有关工作演示，请查看 Mike Bostock 的 Block built using D3 v4, which is similar to your example. Note, that the Block uses MultiLineString 对象，以说明往返任何特定机场的多个航班，可以像简单的 [=15] 一样将其馈送到路径生成器=] 对象，虽然。该示例创建如下大弧线：

在读取机场信息时为每个机场创建空 MultiLineString 对象：

d3.queue()
    .defer(d3.csv, "airports.csv", typeAirport)

// ...

function typeAirport(d) {
  d[0] = +d.longitude;
  d[1] = +d.latitude;
  d.arcs = {type: "MultiLineString", coordinates: []};
  return d;
}

遍历航班并将源机场和目标机场的坐标推送到 MultiLineString 对象的 coordinates 属性。

flights.forEach(function(flight) {
  var source = airportByIata.get(flight.origin),
      target = airportByIata.get(flight.destination);
  source.arcs.coordinates.push([source, target]);
  target.arcs.coordinates.push([target, source]);
});

创建合适的地理路径生成器。

var path = d3.geoPath()
    .projection(projection)
    .pointRadius(2.5);

绑定数据，使其可供路径生成器实际绘制大弧线。

var airport = svg.selectAll(".airport")
  .data(airports)
  .enter().append("g")
    .attr("class", "airport");

// ...

airport.append("path")
    .attr("class", "airport-arc")
    .attr("d", function(d) { return path(d.arcs); });  // great arc's path

在 D3 符号地图上绘制连接线 ("Great Arcs")

Drawing Connecting Lines ("Great Arcs") on a D3 Symbol Map

charts

great-circle

d3.js