[英]Using own JSON data in D3
I am following this d3.js
example.我正在关注这个
d3.js
示例。
The data in this example is a csv
file with the following structure:本例中的数据是一个
csv
文件,结构如下:
name![]() |
code![]() |
pop![]() |
---|---|---|
Albania![]() |
ALB ![]() |
3153731 ![]() |
United States![]() |
USA![]() |
299846449 ![]() |
Great Britain![]() |
GBR ![]() |
60244834 ![]() |
The data is loaded this way:数据以这种方式加载:
.defer(d3.csv, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) { data.set(d.code, +d.pop); })
Now I am trying to use my own modified data in JSON format.现在我正在尝试使用我自己修改的 JSON 格式的数据。
test.json
[{
"name": "Albania",
"code": "ALB",
"pop": "0.111"
},
{
"name": "United States",
"code": "USA",
"pop": "0.222"
},
{
"name": "Great Britain",
"code": "GBR",
"pop": "0.333"
}
]
To do this I just load my data instead of the dummy data:为此,我只加载我的数据而不是虚拟数据:
var test = "test.json"
.defer(d3.json, test , function(d) { data.set(d.code, +d.pop);})
If I console.log
the csv
and the json
, the resulting Objects look exactly the same.如果我
console.log
csv
和json
,生成的对象看起来完全一样。 But with the json
no map is loaded and with the csv
the map is loaded.但是使用
json
没有加载 map 并且使用csv
加载了 Z1D78DC8ED51214E518B5114AE24490。
When I console.log
the csv
data like this:当我
console.log
csv
数据时,如下所示:
.defer(d3.csv, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) { console.log("DATA : " , d.code)
data.set(d.code, +d.pop);})
I see the values in the code
column in the console.我在控制台的
code
列中看到了值。
If I do the same with the json
:如果我对
json
做同样的事情:
.defer(d3.json, test, function(d) { console.log("DATA : " , d.code)
data.set(d.code, +d.pop);})
Nothing appears in the console.控制台中不显示任何内容。
So my question is, why can I access the values in the csv
with d.code
and d.pop
, but not in the json
?所以我的问题是,为什么我可以使用
d.code
和d.pop
访问csv
中的值,但不能访问json
中的值?
It seems to be that d
in defer(d3.json, test, function(d) {
is an array.似乎
defer(d3.json, test, function(d) {
d
的 d 是一个数组。
Try the following:尝试以下操作:
.defer(d3.json, test , function(d) {
d.forEach(({code, pop}) => data.set(code, +pop));
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.