使用 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 位置（參見 circle_x 和 ciruclar_y），將節點定位在一個圓圈中。

諸如 networkx 之類的庫具有幫助您計算這些位置的算法：
https://networkx.github.io/documentation/stable/auto_examples/drawing/plot_circular_tree.html

使用 networkx（通常在文檔中為G ）生成圖形對象后，您可以使用其中一種導出函數來檢索底層圖形數據（例如節點位置）： https : //networkx.github.io/documentation/穩定/參考/讀寫/index.html