折叠式树状分层结构d3

据称d3没有采用任何特定的数据fromat，无论它是json还是csv。但我注意到一些奇怪的行为。折叠式树状分层结构d3

在这个例子中http://bl.ocks.org/mbostock/4339083，输入文件是JSON所以

d3.json("/d/4063550/flare.json", function(error, flare) { 
    root = flare; 
    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); 
});

在这种example，它是装载

d3.csv("FederalBudget_2013_a.csv", function(csv) { 
     var data=[]; 
     //Remove all zero values nodes 
     csv.forEach(function (d) { 
      var t=0; 
      for (var i=0; i < sumFields.length; i++) { 
       t+= Number(d[sumFields[i]]); 
      } 
      if (t > 0) { 
       data.push(d); 
      } 
     }) 
     var nest = d3.nest() 
       .key(function(d) { return d.Level1; }) 
       .key(function(d) { return d.Level2; }) 
       .key(function(d) { return d.Level3; }) 
       .entries(data); 

     root={}; 
     root.values=nest; 
     root.x0 = h/2; 
     root.y0 = 0; 

     var nodes = tree.nodes(root).reverse(); //? 
     tree.children(function (d){ return d.children;}); //? 
     update(root); 
});

请澄清为何有不同的方法csv文件我在哪里放置了一个quesiton标记。我试图在第二个例子中看到孩子们，但是没有任何回报。谢谢。

来源

2014-03-30 user1896196

确实，d3可以使用各种各样的数据格式，但是您提供的示例试图做一些不同的事情，因为每种数据类型都是配置的。

第一个示例中的json文件在层次结构中进行配置，该层次结构表示树形图可以立即使用的数据类型，但csv数据在其尚未形成的意义上为“平坦”以树形式安排父母/子女关系。例如，以下是一个'平面'数据结构，其中一系列命名节点都有一个父节点。

name,parent  
"Level 2: A","Top Level" 
"Top Level", "null" 
"Son of A","Level 2: A" 
"Daughter of A","Level 2: A" 
"Level 2: B","Top Level"

以下是使用层次结构中表达的关系编码的相同数据（与json等价）。

[ 
    { 
    "name": "Top Level", 
    "parent": "null", 
    "children": [ 
     { 
     "name": "Level 2: A", 
     "parent": "Top Level", 
     "children": [ 
      { 
      "name": "Son of A", 
      "parent": "Level 2: A" 
      }, 
      { 
      "name": "Daughter of A", 
      "parent": "Level 2: A" 
      } 
     ] 
    }, 
    { 
     "name": "Level 2: B", 
     "parent": "Top Level" 
    } 
    ] 
} 
]

图形等价物如下;

d3.js tree diagram

这可能是有用的看看超过this blog post，说明两个类型的输入和一些其他实施方式中

来源

2014-03-30 09:12:42 d3noob

谢谢你的回应！我非常重视您的博客以了解，这非常有用！看起来（为了让生活更简单），我们应该尝试在JSON父/子层次结构中格式化数据，而不是使用csv？除了Brightpoint示例以外，我还没有看到关于csv的许多文档以及树层次结构。 – user1896196

理想的情况下，如果可能的话，json将是值得的努力，但有时我们没有得到选择:-)。如果答案是合适的，不要忘记接受它:-)。 – d3noob

要在Brightpoint的例子阐明，使用d3.nest()函数采用扁平CSV数据并根据.key值（在本例中为平面CSV数据中的列名称）创建分层结构。这是创建子项的位置。

理想情况下，您的后端服务可以创建JSON格式的数据，但通常情况下您必须操纵数据客户端以将其转换为可消化格式。

来源

2014-08-19 17:21:01 twgonzalez

折叠式树状分层结构d3

回答

相关问题