如何将多个弧添加到地球答案

【问题标题】：How to add multiple arcs to globe如何将多个弧添加到地球
【发布时间】：2016-10-17 05:13:48
【问题描述】：

我有一个简单的 d3 v4 地球仪，并且（在此处的一些帮助下）有一个弧线，该弧线在最后会产生动画。我现在希望从 json 文件中添加几条弧线，并尝试操作坐标，但没有成功。

这是工作代码。 https://plnkr.co/edit/ZYM5f1KR1FXiTq1y4n1f?p=preview

我已经包含了一个带有示例 json 数据的 data.json 文件。我的问题是加载和循环这个文件。

d3.json('data.json')

然后我就迷路了。

【问题讨论】：

标签： d3.js

【解决方案1】：

首先，让我们嵌套两个d3.json 函数：

d3.json("https://rawgit.com/mbostock/topojson/master/examples/world-50m.json", function(error, world) {
    d3.json("data.json", function(coord){
    //code here
    });
});

这样，我们可以同时访问两个 JSON。

由于source 和target 都是地理坐标，我们会将您的JSON 更改为：

[{"source":[-74, 40],"destination":[37, 55]},
{"source":[20, 50],"destination":[-60, -39]},
{"source":[37, 55],"destination":[32, -15]}, 
//
{"source":[147, -37],"destination":[-80, 37]}]

因此，每个source 和destination 都将坐标作为一个数组。

然后，在您的代码中，我们附加路径：

var line = svg.selectAll(".paths")
  .data(coord)
  .enter()
  .append("path");

这是你的小伙伴：https://plnkr.co/edit/Ax4Tby47lFlryzVWCHi2?p=preview

【讨论】：

这很好用（谢谢）。我现在可以看到嵌套是如何工作的以及我哪里出错了。如果我理解正确，d3 会获取 json 数据并在内部进行迭代，然后绘制线条并在完成时触发 .end 的着陆。是否可以单独绘制每条线？例如：在给定的时间间隔内，甚至来自 json 请求？
是的，这是可能的，但您必须编写不同的转换。由于这是另一个问题，我建议您就此发布一个不同的问题（分别画线）。