javascript - 如何在 D3 中的径向 Reingold-Tilford 树中拖放节点？

Question

我正在实现一个径向 Reingold–Tilford 树 ( http://bl.ocks.org/mbostock/4063550 )，但还有带有平移和缩放、拖动以及可折叠可点击节点的基本示例。我已经能够实现其中的大部分内容。然而，我还需要一件事是将不同节点拖放到其他节点。我也已经能够实现这一点，但是在拖动时我也想显示链接/临时连接器，但在径向 View 中实现它变得很麻烦。

我不知道之后该做什么。这是我目前的工作代码。

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

我需要首先正确计算它的部分，而拖动监听器应该是

                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("变换", 函数 (d) { return "旋转("+ (d.x - 90) + ")翻译("+ d.y + ")";

这意味着 svg Canvas 中的实际 x 和 y 坐标是 Angular d.x-90 及其深度的函数y。这意味着 updateTempConnector 没有获取真正的 x y 坐标，无法使线路看起来连接到 mouseOver 节点。
我建议您研究一下获取实际坐标所需的复杂三 Angular 学，或者摆弄下面的 fiddle ，我在其中取得了一些有限的进展!

特别是使用这些值作为从 overCircle 中的 this 引用获取的 tempLink 的源

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/