D3.js折りたたみツリー：各レベルのラベルを追加する

Question

D3.js（https://bl.ocks.org/mbostock/4339083）の折りたたみ可能なツリーの各レベルのラベルが必要なプロジェクトに取り組んでいます。私は同じものを追加するのに苦労している。添付のスクリーンショットに必要なラベルが追加されています。ラベルは、各レベルをクリックすると直ちに各レベルに配置され、ツリーがロールバックすると消えます。誰もがこれで私を助けることができますか？

Answer 1

ノード項目からレベルを追跡するように更新メソッドを変更します。チャートをプロットするために使用されるノード項目から、すべての深度値のユニークなソートされたハッシュを維持します。ソートされたdepthHash配列を取得したら、テキストをチャートの上部にプロットします。以下は私があなたの参照のために修正した謎です。 http://jsfiddle.net/deepakpster/vomxqxov/3/

var margin = {top: 20, right: 120, bottom: 20, left: 120}, 
    width = 960 - margin.right - margin.left, 
    height = 800 - margin.top - margin.bottom; 

var i = 0, 
    duration = 750, 
    root; 

var tree = d3.layout.tree() 
    .size([height, width]); 

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.y, d.x]; }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.right + margin.left) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

flare = "http://rawgit.com/mbostock/1093025/raw/a05a94858375bd0ae023f6950a2b13fac5127637/flare.json" 
d3.json(flare, 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); 
}); 

d3.select(self.frameElement).style("height", "800px"); 

function update(source) { 

    // Compute the new tree layout. 
    var nodes = tree.nodes(root).reverse(), 
     links = tree.links(nodes); 

    // Normalize for fixed-depth. 
    nodes.forEach(function(d) { d.y = d.depth * 180; }); 
    // Showing the labels for the level of depths. 
    // Using underscore.js to do the pluck, uniq. 
    var depthHash = _.uniq(_.pluck(nodes, "depth")).sort(); 
    svg.selectAll("g.levels-svg").remove(); 
    var levelSVG = svg.append("g").attr("class", "levels-svg"); 
    var levels = levelSVG.selectAll("g.level"); 
    levels.data(depthHash) 
    .enter().append("g") 
    .attr("class", "level") 
    .attr("transform", function(d) { return "translate(" + d*180 + "," + 10 + ")"; }) 
    .append("text") 
    .text(function(d){ 
     return "level-" + d; 
    }); 

    // Update the nodes… 
    var node = svg.selectAll("g.node") 
     .data(nodes, function(d) { return d.id || (d.id = ++i); }); 

    // Enter any new nodes at the parent's previous position. 
    var nodeEnter = node.enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 
     .on("click", click); 

    /* 
    nodeEnter.append("circle") 
     .attr("r", 1e-6) 
     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 
    */ 
    var ww = 30, hh = 20 
    nodeEnter.append("rect") 
    .attr("height", 1e-6) 
    .attr("width", 1e-6) 
    .attr("x", -ww/2) 
    .attr("y", -hh/2) 
    .attr("rx", 3) 
    .attr("ry", 3) 
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

    nodeEnter.append("text") 
     .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
     .text(function(d) { return d.name; }) 
     .style("fill-opacity", 1e-6); 

    // Transition nodes to their new position. 
    var nodeUpdate = node.transition() 
     .duration(duration) 
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); 

    nodeUpdate.select("rect") 
    .attr("width", ww) 
    .attr("height", hh) 
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

    nodeUpdate.select("circle") 
     .attr("r", 4.5) 
     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

    nodeUpdate.select("text") 
     .attr("dx", -10) 
     .style("fill-opacity", 1); 

    // Transition exiting nodes to the parent's new position. 
    var nodeExit = node.exit().transition() 
     .duration(duration) 
     .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 
     .remove(); 

    nodeExit.select("circle") 
     .attr("r", 1e-6); 

    nodeExit.select("text") 
     .style("fill-opacity", 1e-6); 

    // Update the links… 
    var link = svg.selectAll("path.link") 
     .data(links, function(d) { return d.target.id; }); 

    // Enter any new links at the parent's previous position. 
    link.enter().insert("path", "g") 
     .attr("class", "link") 
     .attr("d", function(d) { 
     var o = {x: source.x0, y: source.y0}; 
     return diagonal({source: o, target: o}); 
     }); 

    // Transition links to their new position. 
    link.transition() 
     .duration(duration) 
     .attr("d", diagonal); 

    // Transition exiting nodes to the parent's new position. 
    link.exit().transition() 
     .duration(duration) 
     .attr("d", function(d) { 
     var o = {x: source.x, y: source.y}; 
     return diagonal({source: o, target: o}); 
     }) 
     .remove(); 

    // Stash the old positions for transition. 
    nodes.forEach(function(d) { 
    d.x0 = d.x; 
    d.y0 = d.y; 
    }); 
} 

// Toggle children on click. 
function click(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    update(d); 
}