Javascript d3.js & json - 简单的示例代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10549585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3.js & json - simple sample code?
提问by clerksx
There are some examples to get data from external json file in d3.js. But these samples do not show the json, so I really want to see how it works.
有一些示例可以从 d3.js 中的外部 json 文件中获取数据。但是这些示例没有显示json，所以我很想看看它是如何工作的。
I have this json file test.json, and it looks like
我有这个 json 文件 test.json，它看起来像
[
{"a":"-1.14","b":"4.14"},
{"a":"-0.13","b":"1.38"},
{"a":"-4.19","b":"1.43"},
{"a":"-0.21","b":"3.34"}
]
And I want to make a scatterplot with these data.
我想用这些数据制作散点图。
In the d3.js script. I added so far.
在 d3.js 脚本中。我添加到此为止。
var width = 400;
var height = 400;
var x = d3.scale.linear()
.domain ([-5, 5])
.range([0, width]);
var y = d3.scale.linear()
.domain ([-5, 5])
.range([0, height]);
var chart = d3.select("body").append("svg")
.attr("width", width+70)
.attr("height", height+70)
.attr("class", chart)
.append("g")
.attr("transform", "translate(30, 30)");
chart.selectAll("xline")
.data(x.ticks(11))
.enter().append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", height)
.style("stroke", "#ccc");
chart.selectAll("yline")
.data(y.ticks(11))
.enter().append("line")
.attr("y1", y)
.attr("y2", y)
.attr("x1", 0)
.attr("x2", width)
.style("stroke", "#ccc");
If I use this dataset:
如果我使用这个数据集：
var dataset = [ [-1, -3], [2, 4], [3, -4], [-3, 1]];
I added this and it works fine.
我添加了这个，它工作正常。
chart.selectAll("scatter-dots")
.data(dataset)
.enter().append("circle")
.attr("cx", function (d) { return x(d[0]); } )
.attr("cy", function (d) { return y(d[1]); } )
.attr("r", 10)
.style("opacity", 0.6);
I am wondering how I should change this part that calls data, if I use an external json file. I will really appreciate someone can teach me this! Many thanks.
我想知道如果我使用外部 json 文件，我应该如何更改调用数据的这部分。我真的很感激有人能教我这个！非常感谢。
回答by paxRoman
Try something like this
尝试这样的事情
d3.json("data.js", function(data) {
alert(data.length)
});
where data.js or data.json or whatever you want to call it as long as it has js content is your json file. Also try reading: https://github.com/mbostock/d3/wiki/Requests. All your code that uses the json data will be called from the json callback function.
其中 data.js 或 data.json 或任何你想调用它的东西，只要它有 js 内容就是你的 json 文件。也可以尝试阅读：https: //github.com/mbostock/d3/wiki/Requests。所有使用 json 数据的代码都将从 json 回调函数中调用。
回答by strack
You can also use Jquery JSON callsif you're more familiar with those. Or you can even just use a script tag that references a variable being assigned to JSON, like so:
您还可以使用jQuery的JSON电话，如果你比较熟悉的。或者，您甚至可以只使用一个脚本标记来引用分配给 JSON 的变量，如下所示：
<script src="us-pres.json" type="text/javascript"></script>
where us-pres.json starts like this:
us-pres.json 开始的地方是这样的：
var dataset = {"state":"US",...
As long as you get the JSON into a variable (collection), d3 doesn't really care how you do it. Once it's there, you just assign it using the d3 .data(dataset)call.
只要您将 JSON 放入一个变量（集合）中，d3 并不真正关心您是如何做的。一旦它在那里，你只需使用 d3.data(dataset)调用分配它。
