使用 foreignObject 在 d3js 强制布局中制作 contenteditable 标签并在 Chrome 上拖动答案

【问题标题】：Make contenteditable labels in a d3js force layout with foreignObject and drag on Chrome使用 foreignObject 在 d3js 强制布局中制作 contenteditable 标签并在 Chrome 上拖动
【发布时间】：2014-07-31 19:03:26
【问题描述】：

在这里您可以找到带有可编辑标签的图表（使用 SVG foreinobject）。

nodes.append("foreignObject")
        .attr({width: 100, height: 100})
        .append("xhtml:body")
        .append("xhtml:span")
        .attr("contenteditable", true)
        .html(function(d) { return d.name })
        .on("keyup", function(d, i)
                {
                    console.log(d3.select(this).text());
                });

http://jsfiddle.net/J9HZ2/

如果我移除阻力，Chrome 和 FF 就可以了。

问题在于它在 Chrome 上无法正常工作。火狐上还行。一个想法？

谢谢

亚尼克

【问题讨论】：

标签： javascript google-chrome svg d3.js force-layout

【解决方案1】：

使用 Chrome v54，感觉就像一个 bug（鼠标左键单击文本节点不会显示输入文本的提示）。不过有一个解决方法：

右键单击文本跨度元素。这会将蓝色选择应用于文本。选择后，您可以开始输入以覆盖现有文本。

编辑完文本后，单击文本范围之外的任意位置。

【讨论】：