将json加载到d3.js中以用于径向树状图

Question

因此，这里的javascript新手一直在努力研究如何将JSON 源json加载到d3.js径向树形图中。 位于此处： d3.js径向树状图示例

目前的计划是将JSON导入python，或者使用python将json转换为2列（id，value）csv。

但是我很想了解这是如何实现的，因为我近两天来一直在学习javascript和d3.js。

基本上我正在尝试将数据加载到d3.js中以允许以下内容的可视化

以系统为根

编辑：显示有希望的卷须流

system --> model_type --> system_revision --> firmware_version --> firmware_build, system_name

遵循上面链接中给出的示例csv。

id,value
systems,
systems_PowerEdge R720xd,
systems_PowerEdge R720xd_I,
systems_PowerEdge R720xd_I_1.50.50,
systems_PowerEdge R720xd_I_1.50.50_34,ldc0000

是我想获得的输出。

Answer 1

从昨天刚回到这个问题。 正如我在评论中所说，您需要将JSON结构转换为d3.hierarchy所需的父/子层次。 不幸的是，您的源数据根本不是真正的分层结构，因此，我看到的唯一方法是非常手动的方式：

var root = {
    id: "system",
    children: []
  };
  data.systems.forEach(function(d,i){
    var key = Object.keys(d)[0],
        sysInfo = d[key].sysInfo;
    root.children.push({
      id: sysInfo.system_model,
      children: [{
        id: sysInfo.system_revision,
        children: [{
          id: sysInfo.firmware_version,
          children: [{
            id: sysInfo.firmware_build
          }, {
            id: key
          }]
        }]
      }]
    });
  });

  root = d3.hierarchy(root);

此后，树状图代码保持不变，只是修复了文本标签：

.text(function(d) { console.log(d); return d.data.id });

---

完整的运行代码 。