摺疊式樹狀分層結構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

回答

相關問題