Größenänderbare Rechtecke für Knoten in D3 reduzierbarem Baum

Question

Ich modifizierte die collapsible tree example, um Rechtecke anstelle von Kreisen zu verwenden.

https://plnkr.co/edit/UKUufJItPQqIKH8DBGLx?p=preview

Meine Frage ist, wie das Rechteck Höhen selbst zu erhalten, um die Größe je nach dem Text der Knoten. Wenn Sie feststellen, dass der oberste Knoten überquellenden Text, während die Größe des

Ich bin mir dessen bewusst .getBBox() und die canonical wrap example hat aber, wie ich D3 noch neueres bin, frage ich mich, wie zu bringen Alles zusammen, um es zur Arbeit zu bringen.

Answer 1

Canonical Wrap:

function wrap(text, width) { 
    text.each(function() { 
    var text = d3.select(this), 
     words = text.text().split(/\s+/).reverse(), 
     word, 
     line = [], 
     lineNumber = 0, 
     lineHeight = 1.1, // ems 
     y = text.attr("y"), 
     dy = parseFloat(text.attr("dy")), 
     tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); 
    while (word = words.pop()) { 
     line.push(word); 
     tspan.text(line.join(" ")); 
     if (tspan.node().getComputedTextLength() > width) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
     } 
    } 
    }); 
} 

nodeHeight = 40, nodeWidth = 150; 

nodeUpdate.selectAll("text").call(wrap,nodeWidth); 

nodeUpdate.select('rect') 
    .attr('rx', 6) 
    .attr('ry', 6) 
    .attr('y', -(nodeHeight/2)) 
    .attr('width', nodeWidth) 
    .attr('height', nodeHeight) 
    .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; }); 

Mit getBBox():

nodeUpdate.select('rect') 
    .attr('rx', 6) 
    .attr('ry', 6) 
    .attr('y', -(nodeHeight/2)) 
    .attr('width', function(d){ 
     var textElement = d3.select(this.parentNode).select("text").node(); 
     var bbox = textElement.getBBox(); 
     var width = bbox.width; 
     return width*2; 
    }) 
    .attr('height', nodeHeight) 
    .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; }); 

Plunker: https://plnkr.co/edit/KtSfKp8mpwnMXElfpC9r?p=preview