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

Question

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

我想使用 Sigma.js 来做到这一点。

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

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

标签： javascriptgraphvizsigma.js

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