d3 以可预测的顺序强制布局节点

Posted 2023-02-22

【中文标题】d3 以可预测的顺序强制布局节点

【英文标题】：d3 force layout nodes in predictable order

【发布时间】：2015-09-24 05:17:14

【问题描述】：

每当您刷新this example 时，节点的顺序都会不同。 你怎么能做到每次刷新时的顺序都是一样的？也许顶部的“子节点1”，然后与右边相邻的是“子节点2”等，一直如此.除此之外，此示例适用于我需要实现的目标。

以下解决方案似乎需要将节点固定到 x,y 点。但是这样做似乎消除了拖动功能（节点需要能够被拖动到不同的位置以更改顺序）。另外，我并不总是知道最初会有多少个节点。

https://groups.google.com/forum/#!topic/d3-js/NsHlubbv3pc

Calm down initial tick of a force layout

Configure fixed-layout static graph in d3.js

虽然拖动是必需的，但动画不是。我尝试查看停止动画是否有任何效果，但没有。

var n = 50;

for (var i = 0; i < n; ++i) force.tick();

force.stop();

此外，尝试在数据中添加一个新属性，为每个孩子提供一个排名，以便以某种方式进行操作。并尝试分配排名和排序的ID。还尝试使用对象数组的索引号。没有运气。感谢您的任何想法。

【问题讨论】：

没有。强制布局实现在设计上是不确定的。

AFAIK 可以通过非常简单的静态力布局bl.ocks.org/mbostock/1667139

@Lars Kotthoff 感谢 Lars。基于此，我切换到径向样式的常规树布局。那就是把事情整理好。希望我能找到一种方法来添加拖动功能来重新定位节点，但这是另一个问题。

@kwoxer 如果您刷新该示例的页面，您将获得不同的布局。您可以修改实现以使其具有确定性，但这可能并非易事。

啊，当然，Lars，我在想这里的顺序很重要。但是，如果他想始终以相同的方式查看它，则确实切换到另一个布局。谢谢你的意见。

【参考方案1】：

每次都不一样的原因是d3使用随机数来防止节点卡在奇怪的地方。在我有限的理解中，随机数起到“摇晃”图表的作用，以帮助它解开自己。

使其可预测的简单解决方案是将随机数生成器替换为可预测的随机数生成器，例如 seedrandom 提供的随机数生成器。

如果您在运行模拟之前使用相同的种子为随机数生成器播种，则每次的结果都是相同的。

请注意，仅对图表进行微小更改会导致图表具有完全不同的布局。 （我总是想到蝴蝶混沌效应来解释原因）。

【参考方案2】：

根据 Lars 的评论，这似乎在强制布局中是不可能的。切换到树形布局。 JSFIDDLE 还需要加拖片。如果我能让它工作，我会更新。

Links to jsfiddle.net must be accompanied by code.