当节点太小时，如何隐藏 d3 中的文本标签？

Question

我正在创建一个类似于此示例的可缩放森伯斯特。问题是我的旭日形有很多数据，所以文本标签混在一起，几乎不可读。因此，当标签太小时，我想隐藏标签，就像在这个d3.partition.layout示例中一样。我该如何去实现这个功能？

Answer 1

一般来说，要实现这一点，您需要绘制文本元素，使用getBBox()并根据该大小获取其实际大小，显示或不显示。代码看起来像这样。

 svg.append("text")
    .style("opacity", function() {
      var box = this.getBBox();
      if(box.width <= available.width && box.height <= available.height) {
        return 1; // fits, show the text
      } else {
        return 0; // does not fit, make transparent
      }
    });

当然，您也可以text完全删除该元素，但这需要单独的传递。