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相比较，如果它太大则将其删除。

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

cells.selectAll("text")
     .text(function(d, i) {
       if(this.getBBox().width <
               document.querySelectorAll("svg > rect")[i].getBBox.width) {
         return d.name;
       }
     });

Answer 2

rect对象里面有一个属性child。

cells.rect.attributes.width.value

可能会改为工作。

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

2 个答案: