d3 adding drag and drop to packed circles - d3.js

Question

I am trying to add the ability to drag a circle from within one parent into another using this as the starting point: https://bl.ocks.org/mbostock/7607535
I've added this code:
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 ] + ")"
})
});
and then tried attaching it like this:
svg.selectAll("circle").call(drag);
or
node.call(drag);
I've two problems, one is positioning the circle correctly as I drag (which I think is because I need to save the origin) and the other one is how to select a sub circle to drag as it is assuming I want the parent circle. Ideally I'd like to be able to select any circle and be able to drop it into any other circle. Is there a way of attaching the drag behaviour so this just works or do I need to look at the data structure in order to work out the lowest level circle I could be trying to drag?

Answer 1

There is a lot going on in the Zoomable example and some of it is colliding with your intent. The quick fixes:
One is positioning the circle correctly as I drag (which I think is because I need to save the origin).
Positioning the circle will require an update during the ondrag event. Here is what I used:
var drag = d3.behavior.drag()
.on("drag", function(d, i) {
d.x += d3.event.dx;
d.y += d3.event.dy;
draw();
});
function draw() {
var k = diameter / (root.r * 2 + margin);
node.attr("transform", function(d) {
return "translate(" + (d.x - root.x) * k + "," + (d.y - root.y) * k + ")";
});
circle.attr("r", function(d) {
return d.r * k;
});
}
This draw function replaces the zoomTo function from the Zoomable example. Getting zoom to work with dragging is possible but it requires some extra thought.
The other one is how to select a sub circle to drag as it is assuming I want the parent circle.
The Zoomable example has this CSS:
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
If you want to target the leaf nodes, you will have to remove the .node--leaf portion of the CSS rule. You can also add a new rule to turn off events for the non-leaf nodes:
.attr("class", function(d) {
return d.parent ? d.children ? "node node--middle" : "node node--leaf" : "node node--root";
})
Note the addition of node--middle.
Ideally I'd like to be able to select any circle and be able to drop it into any other circle. Is there a way of attaching the drag behaviour so this just works or do I need to look at the data structure in order to work out the lowest level circle I could be trying to drag?
You can drag it around without much trouble but the drag behavior will not automatically propagate changes into the data structure. If you want the actual hierarchy to change then there are a few extra steps required:
Detect where the leaf node ended
Change the parent of the leaf node appropriately
Recalculate the entire packing
Redraw/animate the new packing
Step 1 will be the tricky one. I do not have an example handy for helping with this. You can quickly detect the location that a drag event ended using the dragstop event — the trick will be figuring out which node is underneath that stopping point.

Answer 2

It's not allowing you to drag the leaf-most children nodes because there's a css style with pointer-events: none applied to those nodes, so they never trigger drag. So you need to take out some or all of these classes:
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
That'll make it possible to drag the children, but it will not prevent the ability to drag the parents. If you don't want the parents to be draggable, you have to NOT .call(drag) on them. The way to do it is to call drag on a subset of all circles, using filter.
So, after creating the circles, you can do this:
circle
.filter( function(d) { return d.children ? false : true; } )
.call(drag);
That will apply drag only to things that do not have children.
You are right about the incorrect positioning during drag being caused by not knowing the origin. I'm pretty sure you need to save the original circle position on dragstart and then add d3.event.dx to that position during drag.