嵌套一個CSV爲D3樹佈局

Question

我有一個CSV文件，從而

source, target, name, value1 , percentange 
    A1  A1  T1 200  3% 
    A1  A2  T2 340  4% 
    A1  A3  T3 400  2% 

結構，我想構建類似於此D3採用樹形圖Pedigre Diagram

我試圖用這個扁平化的文件example，並取得了一些成功，但我似乎無法讓數組攜帶值和百分比字段，因此它們將在節點上呈現。

我都試過這些例子，但他們似乎並沒有讓全嵌套 https://gist.github.com/phoebebright/3176159#file-index-html

D3: use nest function to turn flat data with parent key into a hierarchy

請參閱下面我的代碼，我們的目標是保證值和百分比的顯示節點。

d3.csv("graph2.csv", function(error, links) { 
     if (error) throw error; 

     var nodesByName = {}; 

     // Create nodes for each unique source and target. 
     links.forEach(function(link) { 
     var parent = link.source = nodeByName(link.source), 
     child = link.target = nodeByName(link.target); 
     if (parent.children) parent.children.push(child); 
     else parent.children = [child]; 
     }); 

這就是我「丟失」所有標籤值和百分比數據

// Extract the root node and compute the layout. 
    var nodes = tree.nodes(links[0].source); 



    // Create the link lines. 
    var link = svg.selectAll(".link") 
     .data(links) 
    .enter().append("path") 
     .attr("class", "link") 
     .attr("d", diagonal) 

    // Create the node circles. 
    var node =svg.selectAll(".node") 
     .data(nodes) 
     .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) 

    node.append("circle") 
     .attr("class", "node") 
      .attr("r", 4.5) 

想都從CSV文件這裏要追加到節點

node.append("text") 
     .attr("class", "source") 
     .attr("x", 8) 
     .attr("y", -6) 
     .text(function(d) { return d.name; }); 

    function nodeByName(name) { 
return nodesByName[name] || (nodesByName[name] = {name: name}); 
}  
    }); 

值

Answer 1

您可以將節點保存到nodesByName：

var nodesByName = {}; 

    // Create nodes for each unique source and target. 
    links.forEach(function(link) { 
    var parent = link.source = nodeByName(link.source, link), 
    child = link.target = nodeByName(link.target, link); 
    if (parent.children) parent.children.push(child); 
    else parent.children = [child]; 
    }); 

function nodeByName(name, node) { 
return nodesByName[name] || (nodesByName[name] = {name: name, node: node}); 
} 

然後像這樣訪問它們：

node.append("text") 
     .attr("class", "source") 
     .attr("x", 8) 
     .attr("y", -6) 
     .text(function(d) { 
      var node = nodesByName[d.name].node; 
      return d.name + ' ' + node.value1 + ' ' + node.percentage; 
     });