使用d3.js制作可拖动的SVG文本

Question

我想在可编辑的d3可视化文本中使用，以便在编辑器中使用。我开始玩这个例子（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); 

3）绑定它到一个元素或一组元素使用.call对d3的选择：

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>组拖动，因此用户点击时和拖动组，整组移动时的任何部分！