如何将节点置于 Sigma.js 中心？

Question

同样的问题was asked five years ago with no answer，也许从那时起就有了解决方案。我不明白 Sigma.js.

中的格式是如何工作的

也许 sigma 不是适合这项工作的工具？我以为我能够完成这样的事情（除了可能比我的 MS 绘画草图更漂亮）：

但是Simga好像并没有像我想象的那样想要被锚定。例如，图书馆网站上的示例代码：

var s = new sigma('container');

// Then, let's add some data to display:
s.graph.addNode({
  // Main attributes:
  id: 'n0',
  label: 'Hello',
  // Display attributes:
  x: 0.5,
  y: 0.5,
  size: 1,
  color: '#f00'
}).addNode({
  // Main attributes:
  id: 'n1',
  label: 'World !',
  // Display attributes:
  x: 1,
  y: 1,
  size: 1,
  color: '#00f'
}).addEdge({
  id: 'e0',
  // Reference extremities:
  source: 'n0',
  target: 'n1'
});

// Finally, let's ask our sigma instance to refresh:
s.refresh();

* {
  padding: 0;
  margin: 0;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
}

#container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/sigma.min.js"></script>
<div id="container"></div>

因为 Sigma 似乎将 x 和 y 位置视为 0 到 1 之间的范围，所以在我看来，如果我将 0.5 用于 x 和 y 坐标，我应该在中心得到一个节点。但相反，您会看到结果。

那么 sigma 是不是适合这项工作的工具，如果不是，我该如何解决这个问题？我不是要别人为我编写所有代码，我只是想了解这个库是如何工作的。

Answer 1

sigma中的节点是根据x y z坐标值绘制的。并通过给出源节点和目标节点来绘制节点之间的线（称为边）。

var s = new sigma('container');

// Then, let's add some data to display:
s.graph.addNode({
  // Main attributes:
  id: 'n0',
  label: 'Hello',
  // Display attributes:
  x: 0,
  y: 0,
  size: 2,
  color: '#f00'
}).addNode({
  // Main attributes:
  id: 'n1',
  label: 'World !',
  // Display attributes:
  x: 1,
  y: 0,
  size: 2,
  color: '#00f'
}).addNode({
  // Main attributes:
  id: 'a1',
  label: 'a1',
  // Display attributes:
  x: 1.05,
  y: -0.20,
  size: 2,
  color: '#00f',
  target:''
}).addNode({
  // Main attributes:
  id: 'a2',
  label: 'a2',
  // Display attributes:
  x: 0.90,
  y: -0.25,
  size: 2,
  color: '#00f',
}).addNode({
  // Main attributes:
  id: 'a3',
  label: 'a3',
  // Display attributes:
  x: 1.15,
  y: -0.30,
  size: 2,
  color: '#00f',
}).addNode({
  // Main attributes:
  id: 'a4',
  label: 'a4',
  // Display attributes:
  x: 1.15,
  y: -0.13,
  size: 2,
  color: '#00f',
}).addNode({
  // Main attributes:
  id: 'a5',
  label: 'a5',
  // Display attributes:
  x: 1.25,
  y: 0.15,
  z: 0,
  size: 2,
  color: '#00f',
}).addNode({
  // Main attributes:
  id: 'b1',
  label: 'b1',
  // Display attributes:
  x: -0.25,
  y: -0.15,
  z: 0,
  size: 2,
  color: '#f00',
}).addEdge({
  id: 'e0',
  // Reference extremities:
  source: 'n0',
  target: 'n1'
}).addEdge({
  id: 'e1',
  // Reference extremities:
  source: 'n1',
  target: 'a1'
}).addEdge({
  id: 'e2',
  // Reference extremities:
  source: 'a1',
  target: 'a2'
}).addEdge({
  id: 'e3',
  // Reference extremities:
  source: 'a1',
  target: 'a3'
}).addEdge({
  id: 'e4',
  // Reference extremities:
  source: 'a1',
  target: 'a4'
}).addEdge({
  id: 'e5',
  // Reference extremities:
  source: 'n1',
  target: 'a5'
}).addEdge({
  id: 'eb1',
  // Reference extremities:
  source: 'n0',
  target: 'b1'
});

// Finally, let's ask our sigma instance to refresh:
s.refresh();

* {
  padding: 0;
  margin: 0;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
}

#container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/sigma.min.js"></script>
<div id="container"></div>

如何将节点置于 Sigma.js 中心？

How can I center a node in Sigma.js?

javascript

sigma.js