d3でContenteditableを持つForeignObjectがクロムで動作していない

Question

foreignObject属性を使用してD3状態図のcontenteditableを含めることができました。これはd3のImproved state diagramと同じですが少し修正しています...問題は、クロムで

が親切にあなたが意志

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

..問題や代替ソリューションを修正するために私にアドバイスをしてください

しかし、私は私のコードでは.call（ドラッグ）を無効にすると、それが正常に動作します。..ドラッグ・リスナー内のイベント・ターゲットをチェックし、ターゲットが外部オブジェクトまたはその子である場合、ドラッグ・イベントの伝搬を停止する必要があります。

サンプルコード：

.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(); 
    } 
});