Question

据说d3没有采用任何特定数据，无论是json还是csv。但我注意到了一些奇怪的行为。

在此示例http://bl.ocks.org/mbostock/4339083中，输入文件是json so

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

请澄清为什么我有不同的方法来放置一个问号。我试图在第二个例子中看到孩子，但没有返回任何东西。谢谢。

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

图形等价物如下;

d3.js tree diagram

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

Answer 2

为了澄清BrightPoint示例，使用d3.nest()函数获取平面CSV数据并根据.key值创建层次结构（在本例中为平面CSV数据中的列名称。）是孩子们被创造的地方。

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

可折叠树层次结构d3

2 个答案: