使用Sigma.js以循环方式放置节点

Question

我有一个树状结构的网络。我想将出现在同一级别的节点放在一个圆的形式中。因此，可以将一个级别可视化为同心圆。

我想使用Sigma.js来做这件事。

假设我知道每个节点的级别。然后，如何选择节点的x和y坐标。

节点和边的数据在json文件中。

Answer 1

下面是一个示例，该图将其节点从网格动画化为圆：

https://github.com/jacomyal/sigma.js/blob/master/examples/animate.html

for (i = 0; i < N; i++) {
  o = {
    id: 'n' + i,
    label: 'Node ' + i,
    circular_x: L * Math.cos(Math.PI * 2 * i / N - Math.PI / 2),
    circular_y: L * Math.sin(Math.PI * 2 * i / N - Math.PI / 2),
    circular_size: Math.random(),
    circular_color: '#' + (
      Math.floor(Math.random() * 16777215).toString(16) + '000000'
    ).substr(0, 6),
    grid_x: i % L,
    grid_y: Math.floor(i / L),
    grid_size: 1,
    grid_color: '#ccc'
};

您只需定义x/y位置(请参见circular_x和ciruclar_y)，它们将节点放置在一个圆中。

networkx等库具有可帮助您计算这些位置的算法：

https://networkx.github.io/documentation/stable/auto_examples/drawing/plot_circular_tree.html

使用networkx (在文档中通常是G )生成图形对象后，可以使用其中一个导出函数来检索底层图形数据(例如节点位置)：https://networkx.github.io/documentation/stable/reference/readwrite/index.html

​

​