导入用于D3地图操作的JSON

时间:2017-03-07 02:00:30

标签: javascript json d3.js

TL;博士

我正在地图上的两个点之间创建弧,如here所示,但我想在json / csv文件中保存那个巨大的坐标数组。我该如何保存该文件以及我应该在脚本中更改哪些内容以便正确解析json / csv文件。

长版

我正在尝试在地图上的两个点之间绘制弧线,如图here所示。

这就是我的所作所为。

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

TOb.Go()

然后我定义了弧线。

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); }); 只是一个函数,它再次为要绘制的路径返回一个字符串,如here所示。

正如你所看到的,我只是用两组坐标创建一个弧(比如城市A和城市B)。我想绘制更多的弧,但不会使我的index.html混乱。我想将坐标放在JSON文件中并从那里创建弧,而不是在index.html中声明坐标。

我确实尝试将坐标放在JSON文件中并使用d3.json来做同样的事情。

makeArc

但这不起作用,控制台说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); }); }); 不是一个功能。我该如何解决这个问题?我愿意同时使用d3.csv / d3.json,只想将坐标移动到另一个文件。

以下是我的JSON文件(arcs.selectAll("path"))在我的JSON声明错误的情况下的样子。

trainRoutes.json

0 个答案:

没有答案