你如何获得已经在 d3 中创建的形状的宽度？

Question

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

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

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

我知道文本的长度和像素是两个不同的单位，但我打算用一个简单的比率来转换它。如何获得已在屏幕上绘制的矩形的宽度？

Answer 1

您可以使用元素 ( 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;
       }
     });