D3.js - 是否可能在力导向图和节点链接树之间进行动画处理？ [英] D3.js - Is it possible to animate between a force-directed graph and a node-link tree?

问题描述

我使用 D3.js 库并查看强制导向图演示：

a href =http://mbostock.github.com/d3/ex/force.html =nofollow noreferrer> http://mbostock.github.com/d3/ex/force.html

>

我也在查看节点链接树：

这不依赖于第二个d3.layout。你遇到的问题是你需要一个树状布局的分层数据集，这需要你转换你的节点和将边缘数据转换为节点子节点的数组，如在层级布局中所期望的。我会这样做的方式是复制数据集和手动平整它，但可能有一个更优雅的解决方案，我不知道。

I am using the D3.js library and looking at the force-directed graph demo:

http://mbostock.github.com/d3/ex/force.html

I am also looking at the node-link tree:

http://mbostock.github.com/d3/ex/tree.html

What I would like to do is:

- Start with the force-directed graph and when the user clicks on a node, have it animated smoothly into a tree, with the selected node in the center. - Then, when the user clicks on any empty space in the canvas, it should animate back to the force-directed graph.

Has anyone done anything like this before, or have any advice as to the best approach to take? I am new to D3.js and have no idea if this is even supported by the framework.

解决方案

What you need to do is stop the force and apply a transformation of the existing nodes to the x-y derived from the other layout. So your function would look like this:

force.stop();
d3.selectAll("g.nodes").transtion().duration(500)
    .attr("translate","transform("+newLayoutX+","+newLayoutY+")"

Then iterate through your nodes array and set the x, y, px, py values to reflect the new X and Y. This will set your nodes to know the current x and y position for the force layout when you run force.start()

You can take a look at the plotLayout() function in this example:

https://gist.github.com/emeeks/4588962

This does not rely on a second d3.layout, though. The problem you'll run into is that you need a hierarchical dataset for the tree layout, which requires you to transform your nodes and edges data into an array of node.children as expected in the hierarchical layouts. The way that I would do it is to duplicate the dataset and manually flatten it, but there may be a more elegant solution that I'm unaware of.

这篇关于D3.js - 是否可能在力导向图和节点链接树之间进行动画处理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！