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

【问题标题】：Making a SVG Text draggable using d3.js使用 d3.js 制作可拖动的 SVG 文本
【发布时间】：2013-04-30 07:11:02
【问题描述】：

我想让 d3 可视化中的文本可拖动以在编辑器中使用。我开始使用其中的一个示例 (http://bl.ocks.org/mbostock/4063550)。当我向文本元素添加一个 dragbeheavier 时，我可以从 ChromeDevTools 中得知某些东西被拖动了，但该拖动没有视觉表示。我也尝试使用 JQuery UI 来做这件事，但也没有用。我想念什么，甚至可以这样做吗？

【问题讨论】：

标签： jquery-ui svg drag-and-drop d3.js

【解决方案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) 在 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)

【讨论】：

对不起，这不是我的意思。我有 SVG 文本元素需要拖动，但它们不响应 .call(drag)
@chenninger 这不就是这里的例子吗？
@chenninger 我更新了 svg 文本元素的示例！很抱歉造成混乱。
不适用于d3 version 4 及更高版本

【解决方案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> 组可拖动，因此当用户单击并拖动组的任何部分时，整个组都会移动！

【讨论】：