用D3计算内存中节点的文本长度答案

【问题标题】：Calculating text length of node in memory with D3用D3计算内存中节点的文本长度
【发布时间】：2018-08-07 23:32:03
【问题描述】：

我正在尝试计算 svg <text> 在内存中的长度（不是在实际的 DOM 中）。这可能吗？如果不是，有什么可能的解决方案？

我有下面的 sn-p 但它说

"message": "Uncaught TypeError: text.node(...).getComputedTextLength is not a function",

这是sn-p：

var svg = d3.select('svg');
var text1 = svg.append("text")
	.attr("x", 10)
	.attr("y", 30)
	.text("Hello world!");

console.log("the text in DOCUMENT has " + text1.node().getComputedTextLength() + " px")

var div = document.createElement('div');
var svg = d3.select(div).append('svg');
text2 = svg.append("text")
	.attr("x", 10)
	.attr("y", 30)
	.text("Hello world!");
console.log("the text in MEMORY has " + text2.node().getComputedTextLength() + " px")

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

看起来您没有在第二个示例中创建图像。您需要一个append('svg') 在 div 中创建一个。但是，我仍然认为不会这样做，因为在渲染图像之前不会计算文本宽度。（至少我试过的时候，打印的长度是0。）

【讨论】：

你是对的。我现在已经修复了我的示例。看来你的解释是对的。那么解决方案可能是什么，因为当我在文档上附加 svg 时，我不想有 FOUC。
您需要做的就是拥有一个“屏幕外” SVG，您可以在其中添加文本以进行测量。 <svg id="offscreen" width="0" height="0"></svg> 之类的东西应该这样做。