使用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)使用.calld3选项将其绑定到元素或一组元素:

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

试一试:http://jsfiddle.net/HvkgN/2/

这是适用于svg文本元素的相同示例:

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)