如何使用 D3 将嵌套数据拉入条形图中？

Question

http://bl.ocks.org/sconnors37/712bf691cefc1a1cb987/e9ae1b459c18fc15b5eb2c9b2fdb46c5f4a6e3ff

这是我的要点文件，你可以看到数据具有结构：

{
  "children": [
    {
      "name": "Al Montoya",
      "saves": 155
},
{
  "name": "Alex Stalock",
  "saves": 147
},
{
  "name": "Anders Lindback",
  "saves": 124
},
{
  "name": "Anton Khudobin",
  "saves": 214}]}

等等

我正在尝试将其放入我的 d3 条形图中，以便 "saves" 沿 Y 轴，"name" 沿 x 轴。当我编辑数据以删除 "children" 附件时，一切正常。我需要编辑什么才能从这个 .json 文件的子目录中提取图表？

谢谢。

Answer 1

我认为这里发生的事情是 d3.json 回调函数中的 data 参数默认查看 JSON 文件的顶层。在这种情况下，它只是 "children" 对象数组。由于您需要使用其中的对象，我认为如果您创建一个专门向下钻取到该数组的新变量，那应该会有所帮助。尝试在 x.domain 函数之前添加：

var data = data.children;

此外，我认为您不需要将 "type" 作为 d3.json 方法的参数，这可能会阻碍对 JSON 数据的请求。我可能会删除它，以便该行显示为：

d3.json("data.json", function(error, data) {

如何使用 D3 将嵌套数据拉入条形图中？

How do I pull nested data into a bar chart using D3?

javascript

bar-chart

d3.js