如何像普通的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>