在 D3 符号图上绘制连接线（“大弧”）

Question

我正在使用D3 Library 的第 4 版，到目前为止，我无法在Symbol Map 上的点之间绘制连接线。在示例中，从早期版本的库中，绘制连接线是使用以下代码完成的：

// 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)); });

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

在版本 4 中，d3.geo.greatArc() appears to have been deprecated 支持 d3.geoDistance()。我不能肯定地说，但我在版本 4 中找不到对greatArc 的引用。不幸的是，我不知道如何设置对geoDistance() 的调用以获取与greatArc() 过去返回的相同信息。 documentation provided for geoDistance() 不足以让我理解如何使用它。

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

Answer 1

Spherical Shapes 上的文档有：

要生成great arc（大圆的一段），只需将 GeoJSON LineString 几何对象传递给d3.geoPath。 D3 的投影对中间点使用大圆弧插值，因此不需要大圆弧形状生成器。

这意味着您可以通过在其coordinates 属性中创建包含起点和终点坐标的 GeoJSON LineString 对象来渲染出色的弧线：

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

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

有关工作演示，请查看使用 D3 v4 构建的 Mike Bostock 的 Block，它与您的示例类似。请注意，Block 使用MultiLineString 对象来说明往返任何特定机场的多个航班，但可以像简单的LineString 对象一样将其馈送到路径生成器。该示例创建了如下所示的大弧：

1. 在读取机场信息时，为每个机场创建空的 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;
   }
   

2. 遍历航班并将源机场和目标机场的坐标推送到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]);
   });
   

3. 创建一个合适的地理路径生成器。

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

4. 绑定数据，使其可用于路径生成器以实际绘制大弧。

   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