在D3符号图上绘制连接线(“大圆弧") [英] Drawing Connecting Lines ("Great Arcs") on a D3 Symbol Map

问题描述

我正在使用 D3库的版本4 ，到目前为止，无法在符号图上的点之间绘制连接线.在该示例中，从该库的早期版本开始，使用以下代码完成绘制连接线的操作:

I am using Version 4 of the D3 Library and am, to this point, unable to draw connecting lines between points on a Symbol Map. In the example, from an earlier version of the library, drawing connecting lines is accomplished with this code:

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

注释是我的(可能是错误的)，代码来自上面的符号映射"示例.

The comments are mine (and could be wrong), the code is from the Symbol Map example, above.

在版本4中，d3.geo.greatArc() 似乎已被弃用，而赞成d3.geoDistance().我不能肯定地说出来，但是在版本4中找不到对greatArc的引用.不幸的是，我不知道如何设置对geoDistance()的调用以获取与greatArc()所返回的信息相同的信息.为geoDistance() 提供的文档不足以满足我了解如何使用它.

In version 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() is not enough for me to understand how to use it.

所以，我的问题是:如何使用库的版本4在D3符号图表上的点(经/长对)之间画线?

So, my question is: How do I draw lines between points (lat/long pairs) on a D3 Symbol Chart using Version 4 of the library?

推荐答案

要生成大弧(大圆的一部分)，只需传递一个GeoJSON LineString几何对象到 d3.geoPath . D3的投影使用大弧插值作为中间点，因此不需要大弧形发生器.

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属性中起点和终点的坐标:

This means you can render great arcs by creating GeoJSON LineString objects containing the coordinates of both the start and end point in its coordinates property:

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

由于这是标准的GeoJSON对象，因此是路径生成器( d3.geoPath )将能够对其进行消化并–使用基础投影–进行大弧插值以创建投影的大弧.

As this is a standard GeoJSON object, a path generator (d3.geoPath) will then be able to digest it and – using the underlying projection – do great-arc interpolation to create a projected great arc.

对于正在工作的演示，请看看Mike Bostock使用D3 v4构建的块.与您的示例类似.请注意，该区块使用 MultiLineString 对象来说明往返任何航班的多次航班特定的机场，但可以将其馈送到路径生成器，方法与简单的LineString对象相同.该示例创建了如下所示的大弧形:

For a working demo have a look at Mike Bostock's Block built using D3 v4, which is similar to your example. Note, that the Block uses MultiLineString objects to account for multiple flights to and from any particular airport, which can be fed to the path generator the same way as the simple LineString objects, though. The example creates the great arcs like follows:

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

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

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

这篇关于在D3符号图上绘制连接线(“大圆弧")的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！