问如何使用d3.js将不重叠的多边形和文本标签添加到3D饼图中？

EN

如何防止SVG文本的重叠

由于文本是绝对定位的，所以没有一个很好的方法来处理重叠标签。SVGs有tspan元素，允许您使用单词包装，但仅此而已。

在我的一个数据可视化项目中，我们不得不处理许多标签，这些标签需要在图形缩小时调整大小。我们处理这个问题的方法是通过计算可用的空间。然后使用以下方法“模拟”文本标签的总大小(在给定的字体大小下)：

selection.node().getBBox().width
selection.node().getBBox().height

如果新标签的尺寸可能重叠，那么您将再次尝试使用较小的字体大小，直到标签的尺寸小于可用空间为止。这不是一个很好的解决方案。

生成SVG元素(为了度量它们的大小)的一个问题是，考虑到迭代的次数，它会触发重呈现，这是非常昂贵的。

通过使用<canvas>计算给定标签的大小，您可以改进这种“蛮力”方法的性能，而无需呈现任何内容：

  let canvasEl = document.createElement('canvas');
  let canvas = canvasEl.getContext('2d').font('12px sans-serif');
  const getWidthHeightOfLabel = (label) => {
    return { 
      width: canvas.measureText(label).width, 
      height: canvas.measureText(label).height
    };
  } 

在某些情况下，我们完全避免了SVG标签，而选择了普通的旧HTML文本，我们将动态地将其放置在SVG的顶部。

如果我的建议不明确，或者你需要更多的信息，请告诉我！谢谢。