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

How to drag an svg group using d3.js drag behavior?

本文关键字：拖动 svg d3 js 何使用      更新时间：2023-09-26

我正在使用D3js拖动。单个元素被完全拖拽。但我想拖拽一组元素。如何做到这一点。这是我的Js小提琴链接:

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

我想同时拖动矩形和文本。这是我尝试过的，但运气不好。我想我错过了一些简单的东西。

首先，元素不关心x和y属性(即:它们只是被忽略)。你可以用transform="translate(x,y)"代替。

第二，您需要检查您在dragmove处理程序中获得的元素实际上是元素，而不是它的子元素。这是因为元素本身没有实际的命中区域。但是它们的子进程会这样做，并且鼠标事件首先传递给子进程，然后再传递给父进程。您可以检查evt.target和evt.currentTarget来查看实际情况。target是最初被击中的元素，currentTarget是当前正在处理事件的事件目标(例如，如果事件冒泡，则为元素)。

For d3 v4:

var drag_this = d3.drag().subject(this)
    .on('start',function (d) {
        if (d.x1){
            d.x1 =  d3.event.x - d.xt;
            d.y1 =  d3.event.y - d.yt;
        }else{
            d.x1 = d3.event.x;
            d.y1 = d3.event.y;
        }
    })
    .on('drag',function(d){
        d3.select(this)
        .attr("transform", "translate(" + (d3.event.x - d.x1)  + "," + (d3.event.y - d.y1) + ")");
        d.xt = d3.event.x - d.x1;
        d.yt = d3.event.y - d.y1;
    });
my_group.call(drag_this);

假设您已经将数据绑定到组。

相关文章：