如何使用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
        });
});