如何在D3中的徑向Reingold-Tilford樹中使節點的拖放工作？

Question

我正在實現一個Radial Reingold–Tilford樹（ http://bl.ocks.org/mbostock/4063550 ），但結合了平移，縮放，拖動以及可折疊的可單擊節點的基本示例。 我已經能夠實現其中的大多數。 但是，我需要做的另一件事是將不同節點拖放到其他節點。 我也已經能夠實現，但是在拖動時我也想顯示鏈接/臨時連接器，但是在徑向視圖上實現它變得很麻煩。

此后我不知所措。 這是我目前的工作代碼。

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

我需要首先正確計算的部分，而Draglistener應該是

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

然后，我可以開始處理連接器。 我已盡可能發表評論。

Answer 1

我看到問題在於節點設置其x和y值的方式。 它們的實際位置由transform函數決定

.attr（“ transform”，function（d）{return“ rotate（” +（dx-90）+“）translate（” + dy +“）”;

這意味着svg畫布中的實際x和y坐標是角度dx-90及其深度y的函數。 這意味着updateTempConnector沒有獲得真實的x y坐標，以使線看起來連接到mouseOver節點。
我建議您研究獲取實際坐標所需的復雜三角函數，或者研究下面的小提琴，在這里我取得了一些有限的進展！

特別是通過將這些值用作tempLink的源，這些鏈接是從overCircle的this參考中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
            }

示例： http ： //jsfiddle.net/robschmuecker/GFe96/3/