可折叠树层次结构 d3答案

【问题标题】：Collapsible Tree Hierarchy d3可折叠树层次结构 d3
【发布时间】：2014-03-30 06:26:35
【问题描述】：

据说 d3 不会从 json 或 csv 中获取任何特定数据。但我注意到了一些奇怪的行为。

在这个例子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中，加载的是一个csv文件

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 d3.js tree

【解决方案1】：

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"
    }
  ]
}
]

图形等效如下；

查看this blog post 可能很有用，它解释了输入类型和其他一些实现

【讨论】：

感谢您的回复！我大量使用您的博客来理解，它非常有用！似乎（为了让生活更轻松），我们应该尝试在 JSON 父/子层次结构中格式化我们的数据，而不是使用 csv？除了 Brightpoint 示例之外，我还没有看到太多关于 csv 以及树层次结构的文档。
理想情况下，如果可能的话，json 是值得的，但有时我们没有选择:-)。如果答案合适，别忘了接受它:-)。

【解决方案2】：

为了在 BrightPoint 示例中进行澄清，使用 d3.nest() 函数获取平面 CSV 数据并基于 .key 值（在本例中为平面 CSV 数据中的列名）创建层次结构。这是子级被创建。

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

【讨论】：