如何在 Sigma.js 中居中节点？

Question

五年前有人问过同样的问题，但没有答案，也许从那时起就有了解决方案。 我不明白 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 position 视为介于 0 和 1 之间的范围，因此在我看来，如果我为 x 和 y 坐标设置 0.5，我应该在中心得到一个节点。 但相反，您会看到结果。

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

Answer 1

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

 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>