如何在 svg 中用省略号截断字符串

Question

我正在使用 d3 库来创建条形图。 轴上的值是字符串（例如，某些名称）。 我可以拖动轴来更改图表的大小。 调整图形大小会导致重新计算适合先前空白空间的线。 由于我使用的是 d3（与 svg 一起使用），因此如果字符串不适合，我无法使用 css 属性添加“...”，我必须手动添加。 我正在使用的 function 如下所示：

 protected truncateLabel( truncatedLabel: Selection<SVGTextElement, unknown, null, undefined>, textToFit: string, freeSpacePx: number, ) { truncatedLabel.node().textContent = textToFit; const averageWidthOfCharInPx = truncatedLabel.node().textLength.baseVal.value / textToFit.length; if (truncatedLabel.node().textLength.baseVal.value <= freeSpacePx){ return truncatedLabel; } const numberOfCharsThatWillFit = freeSpacePx / averageWidthOfCharInPx; truncatedLabel.node().textContent = textToFit.slice(0, numberOfCharsThatWillFit - 2) + '...'; return truncatedLabel; }

如果条形图很少，一切正常，但如果条形图很多，则调整大小开始减慢很多，因为这个 function。 有没有更好的方法来检查字符串是否适合并添加“...”？ 或者有什么方法可以优化我的 function？