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

Question

在这里您可以找到带有可编辑标签的图表(使用 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 上不能正常工作。在 Firefox 上可以。 一个想法？

谢谢

亚尼克

Answer 1

与此解决方案的原作者类似，我对我在 StackOverflow 问题的其他地方找到的 d3.event.stopPropagation() 解决方案感到困惑。基本上，您必须停止“鼠标按下”事件的传播，以防止缩放拖动或任何其他事件触发。

const zoom = d3.zoom().on("zoom", () => {
    console.log("zoomed");
});

d3.select("svg").call(zoom);

d3.select("svg")
    .selectAll("circle")
    .on("mousedown", () => {
        // Without this, clicking the circle will never trigger a mouseup, because zoom will handle mouseup
        d3.event.stopPropagation();
        console.log("mousedown");
    })
    .on("mouseup", () => {
        d3.event.stopPropagation();
        console.log("mouseup");
    });

original answer