3

我正在使用D3 库的第 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)); });

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

在版本 4 中，d3.geo.greatArc() 似乎已弃用d3.geoDistance(). 我不能肯定地说，但我在版本 4 中找不到参考greatArc。不幸的是，我不知道如何设置调用以geoDistance()获取与greatArc()过去返回的相同信息。提供的文档geoDistance()不足以让我了解如何使用它。

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

4

1 回答 1

6

Spherical Shapes的文档有：

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

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

{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. 遍历航班并将源机场和目标机场的坐标推送到对象的coordinates属性MultiLineString。

    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
于 2016-10-11T23:39:07.677 回答