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

Question

同样的问题was asked five years ago with no answer，也许从那时起就有了解决方案。我不明白Sigma.js中的格式化是如何工作的。

也许sigma不是适合这项工作的工具？我认为我能够完成这样的事情(除了可能比我的MS paint草图更漂亮一点)：

​

​

但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之间的范围，因此在我看来，如果x和y坐标为0.5，我应该在中心得到一个节点。但是相反，你会看到结果。

那么，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>

​