在 d3js 中从一个强制有向图转换到另一个图

问题描述

我有两个用于相同节点的可折叠力树.

I have two Collapsible Force Trees for same nodes.

我还没有看到我们可以在 d3js 中使用节点转换和边重建从一棵树转换到另一棵树的示例.

I haven't seen an example that we can transit from one tree to another with nodes transition and edges reconstruction in d3js.

有没有办法做到这一点?

Is there any way to do that?

另一个相关问题，我们可以为强制有向图初始化每个节点的位置吗?

Another relevant question, could we initialize the position of each node for forced-directed graph?

这是一个示例.我有两棵树，链接是一棵树，我有另一棵树，分子相同但树结构不同.我想如果我可以为相同的分子或实体在不同的树之间制作动画会很好.

Here is an example. I have two trees, the link is one, and I have another tree with same molecules but different tree structure. I am thinking it will be nice if I can animate between different trees for same molecules or entities.

推荐答案

原则上，这些是要遵循的步骤.

In principle, these are the steps to follow.

• 停止强制布局以冻结节点的位置.
• 消失链接(例如淡出).
• 将节点转移到新位置.这可以通过在旧数据上设置新位置或完全更改数据然后使用与 tick 处理程序中相同的代码来实现，以实现具有过渡的强制布局
• 重新添加链接.
• 如果新布局也使用强制布局，请开始.

• Stop the force layout to freeze the positions of the nodes.
• Disappear the links (e.g. fade out).
• Transition the nodes to their new positions. This can be done by setting the new positions on the old data or changing the data completely and then using the same code as in the tick handler for a force layout with a transition
• Re-add the links.
• If the new layout also uses a force layout, start that.

我在此处实现了一个示例.我使用了两组数据和两种力布局.一开始只显示第一个力布局的节点和链接，第二个只在后台运行.然后，第一个停止，我按照上面列出的步骤进行操作.

I've implemented an example of this here. I uses two sets of data and two force layouts. At first, only the nodes and links of the first force layout are displayed and the second only runs in the background. Then, the first is stopped and I follow the steps outlined above.

这不会满足所有要求(例如关于节点应如何转换)，但可以用作此类实现的起点.

This isn't going to satisfy all requirements (e.g. with respect to how nodes should transition), but can be used as a starting point for such an implementation.

这篇关于在 d3js 中从一个强制有向图转换到另一个图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！