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>

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

1 个答案: