如何像普通的HTML文本或任何其他文本编辑器一样选择SVG / d3.js文本？

Question

我正在使用d3.js绘制像这样的布局图： https ：//bl.ocks.org/mbostock/950642

但我发现复制并粘贴节点的标签非常困难。 以上面的链接为例，我无法拖动文本来选择任何序列。 我只能双击标签来选择某个字符序列。

如果我尝试使用像Mlle.Vaubois这样的特殊字符选择文本，我只能选择Mlle或Vaubois ，我无法选择整个字符串Mlle.Vaubois 。 （见下图）

而且，我不能在该字符串中选择任意char序列。 例如，我无法选择中间的两个字母： ll在Mlle.Vaubois 。 选择第一个l后立即停止突出显示。 （见下文：）

我只是希望能够像我想要的那样选择任何序列，就像在浏览器中一样。 例如，我可以从HTML文本中选择rce La ： Labeled Force Layout如下所示。 然后我可以Ctrl + C和Ctrl + V按照自己的意愿。

这个问题不仅适用于d3.js，因为另一个更通用的SVG示例也有这个问题： http ： //jsfiddle.net/wPYvS/

我不知道为什么SVG处理文本选择与浏览器或任何主流文本编辑器中的普通HTML文本有什么不同？ 怎么解决？ 谢谢。

Answer 1

以下示例向所有“节点”（即class="node" ）添加一个单击处理程序，它将选择节点中的所有文本。

 var nodes = document.querySelectorAll(".node"); nodes.forEach( function(elem) { elem.addEventListener("click", nodeClickHandler); }); function nodeClickHandler(evt) { var selection = document.getSelection(); var range = selection.getRangeAt(0); range.selectNode(evt.target); } 

 <svg width="500" height="200"> <g class="node" transform="translate(275.4819543667187,131.9805407488932)"> <image xlink:href="https://github.com/favicon.ico" x="-8" y="-8" width="16" height="16"> </image> <text dx="12" dy=".35em">Mlle.Vaubois</text> </g> </svg>