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

【问题标题】：How to retrieve nested values in a JSON file using D3/JS?如何使用 D3/JS 检索 JSON 文件中的嵌套值？
【发布时间】：2017-05-03 01:43:14
【问题描述】：

由于嵌套的方式，我正在努力寻找一种从 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);
});

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

How to retrieve the key values of a nested data set in D3

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

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

data.'x'.stats.hp

【问题讨论】：

您的 JSON 无效。
没有办法让 JSON 工作？是什么使它无效？
@Hawke 你的 JSON 不是无效的。
@GerardoFurtado 提供的 URL 中的数据有效，但问题中包含的数据样本无效。
是的，@sparta93，我看到重现数据结构的失败尝试。

标签： javascript json d3.js

【解决方案1】：

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

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案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
        });
});

【讨论】：