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

问题描述

同样的问题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,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 之间的范围，在我看来，如果我为 x 和 y 坐标设置 0.5，我应该在中心得到一个节点。但是，您会看到结果。

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

解决方法

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,color: '#00f'
}).addNode({
  // Main attributes:
  id: 'a1',label: 'a1',// Display attributes:
  x: 1.05,y: -0.20,color: '#00f',target:''
}).addNode({
  // Main attributes:
  id: 'a2',label: 'a2',// Display attributes:
  x: 0.90,y: -0.25,}).addNode({
  // Main attributes:
  id: 'a3',label: 'a3',// Display attributes:
  x: 1.15,y: -0.30,}).addNode({
  // Main attributes:
  id: 'a4',label: 'a4',y: -0.13,}).addNode({
  // Main attributes:
  id: 'a5',label: 'a5',// Display attributes:
  x: 1.25,y: 0.15,z: 0,}).addNode({
  // Main attributes:
  id: 'b1',label: 'b1',// Display attributes:
  x: -0.25,y: -0.15,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',target: 'a3'
}).addEdge({
  id: 'e4',target: 'a4'
}).addEdge({
  id: 'e5',target: 'a5'
}).addEdge({
  id: 'eb1',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>