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

由于json URL的嵌套方式，我正在努力找到一种从json URL调用数据的方法，如下所示

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

我试图使用“hp”值作为使用d3.js的条形图的高度数据点，并使用“id”值作为每个条形图下的标签，但我不确定如何调用数据并将其存储在变量中，以便在d3代码中使用

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

目前，我只是将数据记录在控制台中，因为我不确定如何将我想要的数据的特定部分存储在变量中

这个问题作为一个起点对我有一点帮助，但我仍然不能完全确定如何继续

我遇到的主要问题是JSON的文件结构有点奇怪，我不确定在我只想引入“hp”的情况下，“x”会是什么：

data.x.stats.hp

您可以这样使用

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

在D3中，

data（）

函数接受三件事：

阵列

函数

没什么

现在，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，函数（json）{
var数据=[]；
var obj=json.data；
for（obj中的var键）{
数据推送（obj[键]）
}
var scale=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d））{
返回d.stats.hp
})])
.范围（[0，500]）；
canvas.selectAll（'rect'）
.数据（数据）
.输入（）
.append（'rect'）
.attr（'width'，函数（d）{
返回刻度（d.stats.hp）
})
.attr（'height'，6）
.attr（'y'，函数（d，i）{
返回i*7
})
.attr（'填充'，'蓝色'）
});
您的JSON无效。无法使JSON正常工作？是什么使它无效？@Hawke your JSON不是无效的。@GerardoFurtado提供的URL中的数据是有效的，但不是问题中包含的数据示例。是的，@sparta93，我看到了重现数据结构的失败尝试。