在 D3 中使用自己的 JSON 数据

Question

我正在关注这个d3.js示例。

本例中的数据是一个csv文件，结构如下：

姓名	代码	流行音乐
阿尔巴尼亚	ALB	3153731
美国	美国	299846449
大不列颠	GBR	60244834

数据以这种方式加载：

.defer(d3.csv, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) { data.set(d.code, +d.pop); })

现在我正在尝试使用我自己修改的 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"
    }
 ]

为此，我只加载我的数据而不是虚拟数据：

var test = "test.json"

.defer(d3.json, test , function(d) { data.set(d.code, +d.pop);})

如果我console.log csv和json ，生成的对象看起来完全一样。 但是使用json没有加载 map 并且使用csv加载了 Z1D78DC8ED51214E518B5114AE24490。

当我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);})

我在控制台的code列中看到了值。

如果我对json做同样的事情：

.defer(d3.json, test, function(d) { console.log("DATA : " , d.code)
    data.set(d.code, +d.pop);})

控制台中不显示任何内容。

所以我的问题是，为什么我可以使用d.code和d.pop访问csv中的值，但不能访问json中的值？

Answer 1

我发现我做错了什么。

我不能使用这部分：

defer(d3.json, test, function(d) { console.log("DATA : " , d.code)
    data.set(d.code, +d.pop);})

因为我不能将一行 function 与d3.json一起使用。

此问题中的更多信息

Answer 2

似乎defer(d3.json, test, function(d) { d的 d 是一个数组。

尝试以下操作：

.defer(d3.json, test , function(d) { 
  d.forEach(({code, pop}) => data.set(code, +pop));
})