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）{ 返回“rotate（”+（d.x - 90）+“）translate（”+ d.y +“）”;

这意味着svg画布中的实际x和y坐标是角度d.x-90及其深度y的函数。这意味着updateTempConnector未获得真正的x y坐标，以使该线看起来与mouseOver节点相连。我建议你研究一下获得实际坐标所需的复杂三角函数，或者调整下面的小提琴，我已经设法取得了一些有限的进展！

特别是使用这些值作为this

中overCircle引用获得的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/

如何在D3中的Radial Reingold-Tilford树内部拖放节点？

1 个答案: