2

Following on from this question, I'm trying to drag nodes (containing groups of circles and text) as combined units without them first jumping to a new position when I click.

I've tried implementing the suggested technique into a radial tree layout (JSFIDDLE) but am hitting a wall. I suspect this is because the radial layout is using a different x,y system than the usual x,y system. I've been trying to work rotate into var drag but can't quite seem to crack it. Is that where I should be focusing? Thanks.

var drag = d3.behavior.drag()
    .on("drag", function(d,i) {
        d.x += d3.event.dx
        d.y += d3.event.dy
        d3.select(this)
            .attr("transform", function(d,i){
                return "translate(" + d.x + "," + d.y + ")"
            })
    });
Community
  • 1
  • 1

1 Answers1

1

It is because of the different x,y transforms used in radial view. I changed your drag function to get the normal x,y coordinates

    var drag = d3.behavior.drag()
    .on("drag", function(d,i) {
  var translateCoords = d3.transform(d3.select(this).attr("transform")); //gets the actual transform value
        d.x = translateCoords.translate[0]; // set x coordinate
        d.y = translateCoords.translate[1]; // set y coordinate
        d.x += d3.event.dx
        d.y += d3.event.dy
        d3.select(this)
          .attr("transform", function(d,i){
                return "translate(" + d.x + "," + d.y + ")"
            })
    });

Here is jsfiddle link for working code

Jerry
  • 987
  • 4
  • 16
  • 46
  • 1
    That helped me in a work for a recent client. Have you managed to add dragging links (all connected with the currently dragged node), too? Radial coordinates bring that dragging functions to another level. – Matt Sergej Rinc Jun 07 '20 at 11:10