d3.js - 如何在d3.js中从内部JSON数组而不是从外部资源/文件中加载可折叠树的数据？

Question

我希望从文件中加载JSON数据数组，以根据Mike Bostock example here生成可折叠的树形图。该示例使用格式正确的外部JSON文件，并使用d3.json函数加载它。

我希望能够从文件中加载json数组，这是从flay数组(按example question here)生成多级数组的结果。

sample file I have stood up on bl.ocks.org / GitHub显示了我要实现的两个部分，而没有获取多级JSON数据并将其连接到可折叠树形图的关键部分

简而言之。我在文件中声明以下数据；

var data = [
     { "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 },
     { "name" : "DEF", "parent":"null", "relation": "null", "depth": 0 },
     { "name" : "new_name", "parent":"ABC", "relation": "rel", "depth": 2 },
     { "name" : "new_name2", "parent":"ABC", "relation": "foo", "depth": 2 },
     { "name" : "Foo", "parent":"DEF", "relation": "rel", "depth": 2 }
    ];

然后通过这部分代码运行...

var dataMap = data.reduce(function(map, node) {
    map[node.name] = node;
    return map;
}, {});

// create the tree array
var treeData = [];
data.forEach(function(node) {
    // add to parent
    var parent = dataMap[node.parent];
    if (parent) {
        // create child array if it doesn't exist
        (parent.children || (parent.children = []))
            // add node to child array
            .push(node);
    } else {
        // parent is null or missing
        treeData.push(node);
    }
});

如下将数组转换为多级json(它也被推送到屏幕上以供引用)；

[
  {
    "name": "DEF",
    "parent": "null",
    "relation": "null",
    "depth": 0,
    "children": [
      {
        "name": "ABC",
        "parent": "DEF",
        "relation": "ghi",
        "depth": 1,
        "children": [
          {
            "name": "new_name",
            "parent": "ABC",
            "relation": "rel",
            "depth": 2
          },
          {
            "name": "new_name2",
            "parent": "ABC",
            "relation": "foo",
            "depth": 2
          }
        ]
      },
      {
        "name": "Foo",
        "parent": "DEF",
        "relation": "rel",
        "depth": 2
      }
    ]
  }
]

但是然后我必须从外部文件加载相同的数据，以便将其放入可折叠的树形图中。执行此操作的代码如下:

d3.json("example.json", function(error, DEF) {
  root = DEF;
  root.x0 = height / 2;
  root.y0 = 0;

  function collapse(d) {
    if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }

  root.children.forEach(collapse);
  update(root);
});

随着图看起来像这样...

我敢肯定，我的脑子里有某种精神障碍正在起作用，这是一个简单的答案，但是它已经使我败下阵来了几个小时。

如何将正确格式化的JSON数据从代码的格式化部分传递到图部分？

谢谢你的帮助。

编辑:我添加了一个 JSFiddle with the suggested edits from Jesus here (http://jsfiddle.net/LGvha/)。

Answer 1

您非常接近，只需将创建的treeData设置为树的根即可。因此，您可以执行以下操作，而不是加载JSON数据:

// replace this line
// d3.json("/d/4063550/flare.json", function(error, flare) {
root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

function collapse(d) {
    if (d.children) {
        d._children = d.children;
        d._children.forEach(collapse);
        d.children = null;
    }
}

root.children.forEach(collapse);
update(root);
//remove this line
// });