2 
cells.append('rect')
      .attr('x', function (d) { return d.x; })
      .attr('y', function (d) { return d.y; })
      .attr('height', function (d) { return d.dy; })
      .attr('fill', function (d) { return d.children ? null : color(d.parent.name); })

cells.append('text')
      .attr('x', function (d) { return d.x + d.dx / 2 })
      .attr('y', function (d) { return d.y + d.dy / 2 })
      .attr('fill', 'white')
      .attr('font-size', 14)
      .text(function (d) {
         if (d.name.length < cells.rect.width) {
              return d.name;
         }
       });

我不知道为什么

cells.rect.width

不工作？但我想知道的是如何在将文本附加到形状之前检查形状的宽度。

我还尝试将形状的宽度推入一个数组，然后使用索引循环遍历数组以检查名称的长度是否长于框的宽度。问题是在创建形状时，首先创建面积最大的形状（框）。另一方面，当附加文本时，它从右下角开始到左上角。

我知道文本的长度和像素是两个不同的单位，但我将把它放在一个简单的比例转换中。如何获得已经在屏幕上绘制的矩形的宽度？

4

2 回答 2

5

您可以使用元素 ( this) 及其bbox获取实际宽度。但是，这不会像您希望的那样工作，因为您正在将字符数与以像素为单位的宽度进行比较。为了让它工作，你需要先绘制文本，然后检查它的宽度rect，如果它太大，就把它删除。

此代码（在绘制rects 和文本之后）将是这样的。

cells.selectAll("text")
     .text(function(d, i) {
       if(this.getBBox().width <
               document.querySelectorAll("svg > rect")[i].getBBox.width) {
         return d.name;
       }
     });
于 2013-07-03T13:38:37.150 回答
3

rect 对象内部有一个属性子项。

cells.rect.attributes.width.value

可能会起作用。

于 2015-02-01T14:53:09.560 回答