在 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));
})