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

Question

エディタで使用するためにd3視覚化ドラッグ可能なテキストを作成したいとします。私は例（http://bl.ocks.org/mbostock/4063550）のeで遊び始めました。テキスト要素にdragbeheavierを追加すると、ChromeDevToolsから何かがドラッグされることがわかりますが、そのドラッグの視覚的表現はありません。私もJQuery UIを使ってやってみました。何が恋しいのですか？

Answer 1

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

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

3）バインド：ハンドラとして上記の機能を使用して、ドラッグ動作を作成）

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：

1）（）タイプd3.eventのドラッグイベントを処理する関数を作成d3選択で.callを使用して要素または要素のセットに追加する：

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

はそれを試してみてください。http://jsfiddle.net/HvkgN/2/ここ

は、同じ例は、adapted for an svg text elementです：

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) 

Answer 2

SVG要素にドラッグ追加するより良い見栄えの方法は、周りのドラッグ可能な要素を移動させる変換の変換を使用することです。これをd3.event.dxとd3.event.dyを使用してマウスの動きを監視するドラッグイベントハンドラと組み合わせます。

var transX = 0; 
var transY = 0; 
var theElement = d3.select('svg#xyz text.blahblah').attr('transform', "translate(" + transX + ", " + transY + ")"); 

var repositionElement = function(data) { 
    transX += d3.event.dx; 
    transY += d3.event.dy; 
    theElement.attr('transform', "translate(" + transX + ", " + transY + ")"); 
}; 

var addDragging = function (element) { 
    element.call(d3.behavior.drag().on('drag', repositionElement)); 
}; 

addDragging(theElement); 

また、Xを変化させるとは異なり/ Y直接、この技術は全体<g>基でドラッグするために使用することができるので、ときにユーザーがクリックとグループの任意の部分をドラッグし、グループ全体で移動します！