Jquery ui 使用d3.js使SVG文本可拖动

我想在d3可视化中制作一个文本，供编辑器使用。我开始使用示例（）中的e。当我向文本元素添加一个dragbehavier时，我可以从ChromeDevTools中看出有些东西被拖动了，但是没有拖动的视觉表示。我还尝试使用jQueryUI来完成这项工作，但也没有成功。我遗漏了什么，甚至可能遗漏什么？

您可以使用它向元素添加拖动事件

1） 创建一个函数来处理拖动事件（类型）：

2） 使用上述函数作为处理程序创建拖动行为：

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

3） 使用

将其绑定到一个元素或一组元素。在d3选择中调用
：

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

试试看：

这是同一个例子：

将拖动添加到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不同，此技术可用于使整个
组可拖动，因此当用户单击并拖动组的任何部分时，整个组将移动
 对不起，我不是这个意思。。我有需要拖动的SVG文本元素，它们没有响应。call（drag）@chenninger这里的示例不就是这么做的吗？@chenninger我更新了SVG文本元素的示例！抱歉造成混淆。不适用于
d3
Version4
及更高版本
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)

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