javascript - d3力布局中心节点定位

Question

我已经使用 d3.js 来可视化我的数据。结果是这样的。

PIC_1

PIC_2

我的问题是如何让数据像PIC_1一样呈现，中心点局部在固定位置，中心点周围的其他点(子点)像一个圆。

现在，当我刷新页面时，数据将重新加载到浏览器中，所有点的位置也会随机变化。

那么哪个d3的api或者tricks可以用来达到这个目的呢。 :)

Answer 1

看看这个例子:

link to jsfiddle

如果您检查代码并尝试布局，您会看到根节点经过特殊处理，使其始终位于图形的中心(除非您拖动它，但即使您拖动它也可以阻止，如果您想要)。

在初始化时，它的属性 fixed 被设置为 true，这样 d3 强制布局模拟就不会移动它。此外，它被放置在包含布局的矩形的中心:

root.fixed = true;
root.x = width / 2;
root.y = height / 2;

您当然需要更改或添加一些代码才能将此功能集成到您的示例中，但核心思想在我链接的示例中非常清楚。

希望这对您有所帮助。如果您有任何问题、需要澄清等，请告诉我。