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

Question

I am using D3js drag. single element is get dragged perfectly fine. but i want to drag a group of elements.How it can be done. Here is what is on my 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);
    }

I want to drag both rect and text simultaneously. Here is what I tried, but no luck. I think am missing something simple.

You should add your code here, and not just link to jsfiddle. — Erik Dahlström, Apr 11 '13 at 11:55

score 26 · Accepted Answer · answered Apr 11 '13 at 08:24

26

First off, the <g> element doesn't care about xand y attributes (as in: they're just ignored). You can use transform="translate(x,y)" instead.

Second, you will need to check that the element you get in the dragmove handler actually is the <g> element, and not a child element of it. This is because <g> elements have no actual hit area themselves. Their children do though, and the mouse events first go to the children then bubble up to the parent. You can inspect evt.target and evt.currentTarget to see this in action. target is the element that was hit originally, currentTarget is the event target that is currently handling the event (e.g the <g> element if the event bubbled up).

answered Apr 11 '13 at 08:24

Erik Dahlström

59,452
12
120
139

3

i tried your approach. but elements are blinking on dragging them. have look over here. http://jsfiddle.net/xnjGD/3/ – Sudarshan Tanwar Apr 11 '13 at 09:18
3

That's because you're not calling the drag from the element. Here's a simple fixup: http://jsfiddle.net/xnjGD/4/. Also see http://stackoverflow.com/questions/13078535/stuttering-drag-when-using-d3-behavior-drag-and-transform. – Erik Dahlström Apr 11 '13 at 11:54
10

thanks Erik. you saved me second time.thanks a lot. and here is the final solution of my problem. http://jsfiddle.net/xnjGD/6/ – Sudarshan Tanwar Apr 11 '13 at 12:26

score 4 · Answer 2 · answered Nov 13 '16 at 23:33

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

This assumes that you have data bound to the group.

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

2 Answers2

Linked