Creazione di un testo SVG trascinabile con d3.js

Question

Voglio rendere un testo in una visualizzazione d3 trascinabile per l'uso in un editor. Ho iniziato a giocare con e degli esempi (http://bl.ocks.org/mbostock/4063550). Quando aggiungo un dragbeheavier all'elemento text, posso dire da ChromeDevTools che qualcosa viene trascinato ma non c'è una rappresentazione visiva di quel trascinamento. Ho anche provato a farlo usando l'interfaccia utente di JQuery che non ha funzionato. Cosa mi manca ed è anche possibile farlo?

Answer 1

È possibile utilizzare drag.behaviour per aggiungere eventi di trascinamento agli elementi.

1) Create una funzione per gestire l'evento di trascinamento (di tipo 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) Creare comportamento trascinate utilizzando la funzione di cui sopra come gestore:

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

3) Bind it ad un elemento o un insieme di elementi utilizzando .call su una selezione d3:

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

Provalo: http://jsfiddle.net/HvkgN/2/

Ecco lo stesso esempio, 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

Un modo più bello per aggiungere trascinare ad un elemento SVG è quello di utilizzare un tradurre trasformare ciò che si muove l'elemento trascinabile intorno. Accoppialo con un gestore di eventi di trascinamento che utilizza d3.event.dx e d3.event.dy per monitorare il movimento del mouse.

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

Inoltre, a differenza cambiando x/y direttamente, questa tecnica può essere usato per fare un intero gruppo <g> trascinabili, in modo che quando l'utente clicca e trascina qualsiasi parte del gruppo, il tutto si muove gruppo!