0

我已经在 DavidB 编写的现有代码上注释了额外的代码，并创建了这个示例来仅提取一个 3d 饼图。我想在饼图中添加折线（不重叠）和文本标签。任何建议都受到高度赞赏。预期的结果应该是这样的。在此处输入图像描述

4

1 回答 1

0

如何防止重叠的 SVG 文本

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

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

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

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

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

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

  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 之上。

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

于 2022-02-14T04:30:18.543 回答