如何使用D3 / JS檢索JSON文件中的嵌套值？

Question

由於其嵌套方式，我正努力尋找一種從json URL調用數據的方法，如下所示。

[
{"data":
  "Aatrox":
    "id": "Aatrox"
    "hp": "500"
   "Ashe":
     "id": "Ashe"
     "hp": "350"
}]

我正在嘗試使用d3.js將“ hp”值用作條形圖的高度數據點，並在每個條形圖下使用“ id”值作為標簽，但是我不確定如何調用數據和將其存儲在我可以在d3代碼中使用的變量中。

d3.json("https://ddragon.leagueoflegends.com/cdn/4.7.16/data/em_us/champion.json
", function(data) {
console.log(data);
});

目前，我只是在控制台中記錄數據，因為我不確定如何將所需的特定部分存儲在變量中。

如何在D3中檢索嵌套數據集的鍵值

這個問題作為一個起點對我有一點幫助，但是我仍然不確定如何進行。

我遇到的主要問題是JSON的文件結構有點奇怪，並且我不確定在我只想輸入“ hp”的情況下是什么“ x”：

數據.'x'.stats.hp

Answer 1

在D3中， data()函數接受三件事：

1. 數組
2. 功能
3. 沒有

現在，您的JSON僅包含一堆嵌套對象：

{
    "data": {
        "Aatrox": {...
        },
        "Ahri": {...
        }
    }
}

因此，第一步是將其轉換為對象數組，我們可以使用該對象綁定數據。 有幾種方法可以做到，對於初學者來說這很容易：

var data = [];
var obj = json.data;
for (var key in obj) {
    data.push(obj[key])
}

現在我們有了一個對象數組（命名為data ），就像這樣……

[{
    id: "Aatrox"
}, {
    id: "Ahri"
}]

...我們可以得到hp屬性：

.attr('width', function(d) {
    return scale(d.stats.hp)
}) 

這是一個使用您的代碼並僅更改數據數組的工作演示：

  var canvas = d3.select('body').append('svg') .attr('width', 500) .attr('height', 500) d3.json("https://ddragon.leagueoflegends.com/cdn/4.7.16/data/en_US/champion.json", function(json) { var data = []; var obj = json.data; for (var key in obj) { data.push(obj[key]) } var scale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.stats.hp })]) .range([0, 500]); canvas.selectAll('rect') .data(data) .enter() .append('rect') .attr('width', function(d) { return scale(d.stats.hp) }) .attr('height', 6) .attr('y', function(d, i) { return i * 7 }) .attr('fill', 'blue') }); 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

Answer 2

你可以這樣使用

d3.json("https://ddragon.leagueoflegends.com/cdn/4.7.16/data/em_us/champion.json
", function(data) {
    console.log(data);
    var canvas = d3.select('body').append('svg');
    canvas.selectAll('rect')
        .data(Object.values(data.data))
        .enter()
        .append('rect')
        .attr('y', function(d) {
            return d.stats.hp;
        });

    canvas.selectAll('text')
        .data(Object.values(data.data))
        .enter()
        .append('text')
        .text(function(d) {
            return d.id
        });
});