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

Question

我正在使用 D3js drag .单个元素被拖动得很好。但我想拖动一组元素。如何完成。这是我的 Js Fiddle link 上的内容:

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

我想同时拖动矩形和文本。这是我tried ，但没有运气。我认为缺少一些简单的东西。

Answer 1

首先， 元素不关心 x和 y属性(如:它们只是被忽略)。您可以使用 transform="translate(x,y)"相反。

其次，您需要检查您在 dragmove 处理程序中获得的元素实际上是 元素，而不是它的子元素。这是因为 元素本身没有实际的命中区域。他们的 child 虽然这样做了，但鼠标事件首先传给了 child ，然后冒泡到 parent 。你可以检查evt.target和 evt.currentTarget看到这个在行动。 target是最初被击中的元素，currentTarget是当前正在处理事件的事件目标(例如，如果事件冒泡，则为 元素)。