jquery-ui - d3.js を使用して SVG テキストをドラッグ可能にする

Question

エディターで使用するために、d3 ビジュアライゼーションのテキストをドラッグ可能にしたいと考えています。例の 1 つ ( http://bl.ocks.org/mbostock/4063550 )で遊び始めました。dragbeheavier をテキスト要素に追加すると、ChromeDevTools から、何かがドラッグされていることがわかりますが、そのドラッグの視覚的表現はありません。また、うまくいかなかったJQuery UIを使用してそれをやろうとしました。私は何を見逃していますか？そうすることさえ可能ですか？

Answer 1

drag.behaviourを使用して、要素にドラッグ イベントを追加できます。

1) ドラッグ イベント (タイプd3.event )を処理する関数を作成します。

function dragmove(d) {
    d3.select(this)
      .style("top", ((d3.event.sourceEvent.pageY) - this.offsetHeight/2)+"px")
      .style("left", ((d3.event.sourceEvent.pageX) - this.offsetWidth/2)+"px")
}

2) 上記の関数をハンドラーとして使用してドラッグ動作を作成します。

var drag = d3.behavior.drag()
    .on("drag", dragmove);

.call3) d3 選択を使用して要素または要素のセットにバインドします。

d3.select("body").append("div")
    .attr("id", "draggable")
    .text("Drag me bro!")
    .call(drag)

試してみてください: http://jsfiddle.net/HvkgN/2/

これは、svg テキスト要素に適応した同じ例です。

function dragmove(d) {
    d3.select(this)
      .attr("y", d3.event.y)
      .attr("x", d3.event.x)
}

var drag = d3.behavior.drag()
    .on("drag", dragmove);

d3.select("body").append("svg")
    .attr("height", 300)
    .attr("width", 300)
    .append("text")
        .attr("x", 150)
        .attr("y", 150)
        .attr("id", "draggable")
        .text("Drag me bro!")
        .call(drag)