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

Question

每当您刷新 this example 时，节点的顺序都不同。 你怎么能做到每次刷新顺序都一样？可能是"sub node 1"在最上面，然后右边相邻的是"sub node 2"，等等，所有周围的方式。除此之外，此示例适用于我需要实现的目标。

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

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();

此外，尝试向数据中添加一个新的属性，为每个 child 赋予一个等级以进行某种操作。并尝试分配排名和排序的 id。还尝试使用 objects 数组的索引号。没有运气。感谢您的任何想法。

Answer 1

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

Links to jsfiddle.net must be accompanied by code.

Answer 2

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

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

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

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

d3 force layout nodes in predictable order