html - ForeignObject HTML 入力テキストを含む D3 ドラッグ可能なグループが原因で、編集できませんでした

Question

テキスト HTML input を含む外部オブジェクトを含むドラッグ可能なグループがあります。

ただし、これにより、ドラッグイベントがマウスクリックイベントを飲み込むように見えるため、テキストボックスが選択/編集できなくなります。

これで私を助けてもらえますか？

ソース コードは http://bl.ocks.org/4334294にあります。

ありがとうございました

Answer 1

この質問は、d3-js google グループの Tore Nauta によって回答されました。

秘訣は、伝播を止めることです。以下のコードの最後の行を参照してください。

handleGroup
        .append("foreignObject")
        .attr("width", 80)
        .attr("height", 37)
        .attr('x', 10)
        .attr( 'y', 5)
        .append("xhtml:body")
        .attr('xmlns','http://www.w3.org/1999/xhtml')
        .html("<input type='text' />")
        .on("mousedown", function() { d3.event.stopPropagation(); });