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

所以javascript新手在这里，一直在敲我的头如何让JSON source json 加载到d3.js径向树状图中。位于：d3.js Radial Dendrogram graph example 加载json到d3.js中用于径向树状图

目前的计划是导入JSON到蟒蛇或使用Python的JSON也许转化成2列（ID，值）CSV。

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

基本上我试图加载数据到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

是我喜欢得到的那种输出。

来源

2016-10-01 liskl

鉴于您的JSON，树状图会是什么样子？ – Mark

编辑原始帖子以更好地解释问题。 – liskl

我不会将我的'JSON'转换为'csv'只是为了转换回'JSON'。你应该问的真正的问题是如何将我的'JSON'重新格式化为层次结构'd3'的需要。看看你链接到的例子，结构在''root'对象中，'{id：“flare”，children：[{id：“one”，children：[...' – Mark

刚刚从昨天回到这个问题。正如我在评论中所说的，您需要将您的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。

来源

2016-10-02 15:08:28 Mark

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

回答

相关问题