CODEWITHSUNDEEP
javascriptd3.js
user4534236
user4534236

Reputation:

d3 - drag node groups in radial tree layout without jumping to new position on click

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

Upvotes: 2

Views: 308

Answers (1)

Jerry
Jerry

Reputation: 1007

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

Upvotes: 1

Related Questions