Question

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

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

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

d3.json('data.json')

然后我迷路了。

Answer 1

Firts，让我们嵌套两个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

如何将多个弧添加到globe

1 个答案: