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

Posted 2023-02-22

【中文标题】使用 foreignObject 在 d3js 强制布局中制作 contenteditable 标签并在 Chrome 上拖动

【英文标题】：Make contenteditable labels in a d3js force layout with foreignObject and drag on 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 上无法正常工作。火狐上还行。 一个想法？

谢谢

亚尼克

【参考方案1】：

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

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

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