Javascript 导入JSON进行D3映射操作

tl；dr

我正在地图上的两点之间创建弧，如图所示，但我想将这个巨大的坐标数组保存在一个json/csv文件中。我应该如何保存该文件，以及应该在脚本中更改什么，以便它正确解析json/csv文件

---

长版本

我试图在地图上的两点之间画圆弧，如图所示

这就是我所做的

首先，我定义了我的坐标（硬编码）。请注意，它们是lon/lat

var trainRoutes = [
       {sourceLocation: [94.91542,27.485983],targetLocation: [77.549934,8.079252]}
];

然后我定义了我的弧

var arcs = svg.append("g").attr("class","arcs"); // adding a class for CSS stuff

最后是绘制它们的代码

arcs.selectAll("path")
                    .data(trainRoutes)
                    .enter()
                    .append("path")
                    .attr('d', function(d) { 
                    return makeArc(d, 'sourceLocation', 'targetLocation', 1); 
});

makeArc

只是一个函数，返回要绘制的路径的字符串，如图所示

正如你所看到的，我只是用两组坐标（比如城市A和城市B）创建了一条弧。我想画更多的弧，但不要把index.html弄得乱七八糟。我想把坐标放在一个JSON文件中，并从中创建弧，而不是在index.html中声明坐标

我确实尝试将坐标放入JSON文件中，并使用d3.JSON进行了同样的操作

d3.json("trainRoutes.json", function(json){
arcs.selectAll("path")
                        .data(json)
                        .enter()
                        .append("path")
                        .attr('d', function(d) { 
                        return makeArc(d, d.sourceLocation, d.targetLocation, 1); });
    });

但这不起作用，控制台显示

arcs。selectAll（“path”）

不是一个函数。我如何解决这个问题？我愿意同时使用d3.csv/d3.json，只想将坐标移动到另一个文件中

下面是我的JSON文件（

trainRoutes.JSON

）的样子，以防我的JSON声明错误

[
    {sourceLocation: [94.91542,27.485983],targetLocation: [77.549934,8.079252]}
]

---

---

您必须嵌套异步函数。为了演示如何操作，请发布所有代码的基本结构（显示所有异步函数）。如果不想使用

d3.queue

，请嵌套所有回调并将所有代码放在最里面的回调中。看看这个答案：我现在时间很紧，但这会有帮助吗：？您必须嵌套异步函数。为了演示如何操作，请发布所有代码的基本结构（显示所有异步函数）。如果不想使用

d3.queue

，请嵌套所有回调并将所有代码放在最里面的回调中。看看这个答案：我现在时间很紧，但这会有帮助吗？