[英]How to cursor-select SVG/d3.js text just like normal HTML text or any other text editor?
I'm using d3.js to draw a layout graph like this one: https://bl.ocks.org/mbostock/950642 我正在使用d3.js绘制像这样的布局图: https ://bl.ocks.org/mbostock/950642
But I found that it's very difficult to copy-and-paste the node's label. 但我发现复制并粘贴节点的标签非常困难。 Take the above link as an example, I can't drag the text to select any sequence.
以上面的链接为例,我无法拖动文本来选择任何序列。 I can only double-click the label to select a certain char sequence.
我只能双击标签来选择某个字符序列。
If I try to select the text with a special char like Mlle.Vaubois
, I can only get Mlle
or Vaubois
selected, I cannot get the whole string Mlle.Vaubois
selected. 如果我尝试使用像
Mlle.Vaubois
这样的特殊字符选择文本,我只能选择Mlle
或Vaubois
,我无法选择整个字符串Mlle.Vaubois
。 (See the below picture) (见下图)
Moreover, I can't select arbitrary char sequence inside that string. 而且,我不能在该字符串中选择任意char序列。 For example, I can't select the middle two letters:
ll
inside Mlle.Vaubois
. 例如,我无法选择中间的两个字母:
ll
在Mlle.Vaubois
。 The highlighting stopped right after the first l
is selected. 选择第一个
l
后立即停止突出显示。 (See below:) (见下文:)
I just want to be able to select any sequence as I want, like in a browser. 我只是希望能够像我想要的那样选择任何序列,就像在浏览器中一样。 For example, I can select
rce La
from the HTML text: Labeled Force Layout
as below. 例如,我可以从HTML文本中选择
rce La
: Labeled Force Layout
如下所示。 Then I can Ctrl + C
and Ctrl + V
as I wish. 然后我可以
Ctrl + C
和Ctrl + V
按照自己的意愿。
This issue is not just for d3.js, because another more general SVG example also has this issue: http://jsfiddle.net/wPYvS/ 这个问题不仅适用于d3.js,因为另一个更通用的SVG示例也有这个问题: http : //jsfiddle.net/wPYvS/
I don't know why SVG handles text selection so different with normal HTML text in a browser or any mainstream text editor? 我不知道为什么SVG处理文本选择与浏览器或任何主流文本编辑器中的普通HTML文本有什么不同? How to solve it?
怎么解决? Thanks.
谢谢。
The following example adds a click handler to all the "nodes" (ie. class="node"
), which will select all the text in the node. 以下示例向所有“节点”(即
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.