CODEWITHSUNDEEP
javascriptd3.js
Rabimba Karanjai
Rabimba Karanjai

Reputation: 196

How to make Drag and Drop of nodes work inside a Radial Reingold–Tilford Tree in D3?

I am implementing a Radial Reingold–Tilford Tree (http://bl.ocks.org/mbostock/4063550) but along with the basic example with that pan and zoom, drag and also collapsible clickable node. I have been able to implement most of it. However one more thing I need is drag and drop of different node to other node. I have been able to implement that too, but while dragging I want to show the link/temporary connector too but it is becoming a hassle to implement at a radial view.

I am at a loss at what to do after this. This is my present working code.

http://jsfiddle.net/rabimba/d6DVn/1/

The portion I need to first calculate it correctly while the draglistener should be

                relCoords = d3.mouse($('svg').get(0));
            if (relCoords[0] < panBoundary) {
                panTimer = true;
                pan(this, 'left');
            } else if (relCoords[0] > ($('svg').width() - panBoundary)) {

                panTimer = true;
                pan(this, 'right');
            } else if (relCoords[1] < panBoundary) {
                panTimer = true;
                pan(this, 'up');
            } else if (relCoords[1] > ($('svg').height() - panBoundary)) {
                panTimer = true;
                pan(this, 'down');
            } else {
                try {
                    clearTimeout(panTimer);
                } catch (e) {

                }
            }

            d.x0 += d3.event.dy;
            d.y0 += d3.event.dx;
            var node = d3.select(this);
            node.attr("transform", "translate(" + d.y0 + "," + (d.x - 90 )+ ")");
            updateTempConnector();
        })

Then I can start working on the connectors. I have commented as much as possible.

Upvotes: 0

Views: 1360

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

I see the problem is the way the nodes have their x and y values set. Their actual positions are dictated by the transform function

.attr("transform", function (d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";

Which means that the actual x and y coordinates in the svg canvas are a function of an angle d.x-90 and their depth y. This means that the updateTempConnector isn't getting the true x y coordinates to make the line look connected to the mouseOver node.
I suggest you look into either the complex trigonometry required to get the actual coordinates or fiddle around with the fiddle below where I have managed to make some limited progress!

Particularly by using these values as the source for the tempLink gotten from the this reference in overCircle

source: {
                x:  (selectedNode.position.left  - ($('svg g').first().offset().left) - ($('svg g')[0].getBoundingClientRect().width/2)) + radius,
                y: (selectedNode.position.top  - ($('svg g').first().offset().top) - ($('svg g')[0].getBoundingClientRect().height/2)) + radius
            }

Example : http://jsfiddle.net/robschmuecker/GFe96/3/

Upvotes: 2

Related Questions