在D3符号地图上绘制连接线（"大圆弧"）

Question

在D3符号地图上绘制连接线（"大圆弧"）

3

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

这些评论是我自己的（可能不准确），代码来自上面的Symbol Map示例。

在版本4中，d3.geo.greatArc()似乎已被弃用，推荐使用d3.geoDistance()。我不能确定，但我在版本4中找不到关于greatArc的任何参考。不幸的是，我不知道如何设置调用geoDistance()以获得与greatArc()曾经返回的相同信息。提供给geoDistance()的文档对我来说不足以理解如何使用它。

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

- Bob Kaufman

1

你提供的示例实际上是 d3 的第二个版本！你真的关心大圆弧或大圆距离吗？还是只是想在两组纬度和经度之间绘制线条？ - Mark

我没有意识到这是一个v2的示例。我已经相应地编辑了我的问题。我只是试图在两组纬度和经度之间画线。 - Bob Kaufman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- altocumulus · Accepted Answer

球形图形的文档如下:

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

这意味着您可以通过创建包含起始点和终止点坐标的GeoJSON LineString对象来呈现大圆弧：

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

作为标准的GeoJSON对象，路径生成器(d3.geoPath)将能够解析它，并利用底层投影进行大圆插值来创建一个投影的大圆。

要查看工作演示，请参阅Mike Bostock使用D3 v4构建的Block，该示例类似于您的示例。请注意，Block使用MultiLineString对象来处理任何特定机场的多个航班，这些对象可以像简单的LineString对象一样提供给路径生成器。该示例创建了如下的大圆：

While reading in the airports' information create empty MultiLineString objects for every airport:

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

Iterate over the flights and push the coordinates of the source and target airport to the coordinates property of the MultiLineString object.

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

Create a suitable geo path generator.

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

Bind the data making it available for the path generator to actually draw the great arcs.

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