javascript - d3 中带有 Contenteditable 的 ForeignObject 不适用于 chrome

Question

我使用了一个 foreignObject 属性来包含 D3 状态图的 contenteditable，这与 d3 中的改进状态图相同，稍作修改...问题是，它不适用于 chrome。

但是当我在我的代码中禁用 .Call(drag) 时，它工作正常..

请建议我解决问题或替代解决方案..

gState.append("foreignObject")
       .attr({ width: 100, height: 100 })
       .attr("x", 35)
       .attr("y",-7)
       .append("xhtml:body")
       .append("xhtml:span")
       .attr("contenteditable", true)
       .html(function (d) { return d.label; })
       .on("click", function (d, i) {
           console.log(d3.select(this).text());
       });

Answer 1

如果目标是外来对象或其子项，您将必须检查拖动监听器中的事件目标并停止传播拖动事件。

示例代码:

.on("drag",function(d){
    //Suppose the node group has a circle and g element other than the foreign object.
    if(d3.event.target.tagName!='circle' && d3.event.target.tagName!='g'){ 
         d3.event.stopPropagation();
    } else{
        //drag action
        d.px += d3.event.dx;
        d.py += d3.event.dy;
        d.x += d3.event.dx;
        d.y += d3.event.dy; 
        tick();
    }
});