如何使用d3.js向3D饼图添加不重叠的折线和文本标签？

Question

我已经在 DavidB 编写的现有代码上注释了额外的代码，并创建了 这个示例来仅提取一个 3d 饼图。 我想向饼图添加多段线（非重叠）和文本标签。 任何建议都非常感谢。 预期结果应如下所示。

Answer 1

如何防止 SVG 文本重叠

由于文本是绝对定位的，因此没有很好的方法来处理重叠标签。 SVGs有tspan元素，可以让你自动换行，但仅此而已。

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

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

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

生成 SVG 个元素（为了测量它们的大小）的一个问题是它会触发重新渲染，考虑到迭代次数，这是昂贵的。

您可以通过使用<canvas>计算给定 label 的大小而不渲染任何内容来提高这种“蛮力”方法的性能：

  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 之上添加 position。

如果我的建议不清楚或者您需要其他信息，请告诉我。 谢谢。