如何使用d3.js拖动行为拖动svg组？

Question

我正在使用D3js拖动.单个元素被拖得很好.但我想拖动一组元素.如何做到这一点.这是我的Js Fiddle链接:

  function onDragDrop(dragHandler, dropHandler) {
        var drag = d3.behavior.drag();

    drag.on("drag", dragHandler)
    .on("dragend", dropHandler);
    return drag;
    }

    var g = d3.select("body").select("svg").append("g")
    .data([{ x: 50, y: 50 }]);

    g.append("rect")
    .attr("width", 40)
    .attr("height", 40)
    .attr("stroke", "red")
    .attr("fill","transparent")
    .attr("x", function (d) { return d.x; })
    .attr("y", function (d) { return d.y; })
    .call(onDragDrop(dragmove, dropHandler));

    g.append("text")
    .text("Any Text")
    .attr("x", function (d) { return d.x; })
    .attr("y", function (d) { return d.y; })
    .call(onDragDrop(dragmove, dropHandler));

    function dropHandler(d) {
       // alert('dropped');
    }

    function dragmove(d) {
        d3.select(this)
      .attr("x", d.x = d3.event.x)
      .attr("y", d.y = d3.event.y);
    }

我想同时拖动rect和text.这是我尝试过的,但没有运气.我想我错过了一些简单的事情.

Answer 1

首先,<g>元素不关心x和y属性(如:它们只是被忽略).你可以transform="translate(x,y)"改用.

其次,您需要检查您在dragmove处理程序中获得的元素是否实际上是<g>元素,而不是它的子元素.这是因为<g>元素本身没有实际的命中区域.他们的孩子会这样做,鼠标事件首先会传给孩子,然后冒泡到父母那里.您可以检查evt.target并evt.currentTarget查看此操作.target是最初被击中的元素,currentTarget是当前正在处理事件的事件目标(例如,如果事件冒泡,则为<g>元素).