D3 Force Layout - 自定义折叠,解除折叠

时间:2014-06-17 13:49:47

标签: javascript jquery d3.js force-layout directed-graph

我正在使用d3的强制布局来创建自定义折叠机制,其中节点向父节点折叠并排列在其后面的集群中。这是使用具有节点和链接的JSON的常规FOrce布局。我已经设法让布局折叠并向主节点聚类,但是一旦转换完成,它就会将节点重新设置回原始位置。我觉得这与tick()函数有关。

这是我的代码,用于折叠节点和链接。 (px,py)是他们聚集的点。

currentNode.transition()
           .duration(2000)
           .attr("transform", "translate(" + px + "," + py + ")");

currentLink.transition()
           .duration(2000)
           .attr("x2", px)
           .attr("y2", py);

在tick函数中,我有以下内容:

force.on("tick", function () {
            link.attr("x1", function (currLink) {
                return currLink.source.x;
            })
                .attr("y1", function (currLink) {
                    return currLink.source.y;
                })
                .attr("x2", function (currLink) {
                    return currLink.target.x;
                })
                .attr("y2", function (currLink) {
                    return currLink.target.y;
                });

            node.attr("transform", function (currNode) {
                return "translate(" + currNode.x + "," + currNode.y + ")";
            });
        });

我在这里错过了一些非常愚蠢的东西吗?感谢。

0 个答案:

没有答案