Question

所以javascript新手在这里，一直在敲打着如何获得JSON source json 加载到d3.js径向树状图中。位于此处：d3.js Radial Dendrogram graph example

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

但我很想了解这是如何实现的，因为我现在已经在javascript和d3.js上敲了近2天。

基本上我试图将数据加载到d3.js中允许可视化以下

以root为系统

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

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

完全正常运行code。

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

1 个答案: