Einen SVG-Text ziehbar machen mit d3.js

Question

Ich möchte einen Text in einer d3-Visualisierung für den Einsatz in einem Editor ziehbar machen. Ich begann mit den Beispielen zu spielen (http://bl.ocks.org/mbostock/4063550). Wenn ich dem Textelement einen Dragbehavier hinzufüge, kann ich anhand der ChromeDevTools erkennen, dass etwas gezogen wird, aber es gibt keine visuelle Darstellung dieses Ziehens. Ich habe auch versucht, es mit JQuery UI zu tun, was auch nicht funktioniert hat. Was vermisse ich und ist das überhaupt möglich?

Answer 1

Sie können drag.behaviour verwenden, um Drag-Events zu Elementen hinzuzufügen.

1) Erstellen einer Funktion, um die Drag-Ereignis zu behandeln (vom Typ 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) Erstellen drag Verhalten die obige Funktion als Handler:

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

3) Bind es auf ein Element oder einen Satz von Elementen auf einer .call d3 Selektion mit:

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

Probieren Sie es aus: http://jsfiddle.net/HvkgN/2/

Hier ist das gleiche Beispiel 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

Eine schönere Art und Weise zu einem SVG-Element hinzuzufügen, ziehen zu verwenden ist ein translate transformieren, das die verschiebbare Element bewegt sich. Koppeln Sie dies mit einem Drag-Ereignishandler, der d3.event.dx und d3.event.dy verwendet, um die Bewegung der Maus zu überwachen.

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); 

Auch im Gegensatz zu ändern x/y diese Technik kann direkt verwendet werden, eine ganze <g> Gruppe ziehbar zu machen, so dass, wenn der Benutzer klickt und zieht einen Teil der Gruppe, die ganzen Gruppe bewegt!