Question

我修改了collapsible tree example以使用矩形而不是圆圈。

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

我的问题是如何根据节点的文本获取矩形高度以调整自身大小。如果您注意到顶部节点在

的大小时有溢出的文本

我知道.getBBox（）和canonical wrap example但是由于我还不熟悉D3，我想知道如何将它们整合在一起才能让它发挥作用。

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

使用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

D3可折叠树中节点的可调整大小的矩形

1 个答案: