sigma.js中的有向边 - 一个最小的例子

Question

问题

在sigma.js中生成有向边需要什么？我正在寻找一个最小的例子，它最好是基于他们home page目前的最小例子。

尝试

我尝试以下列方式调整sigma.js homepage中的最小图示例

  sigma.parsers.json('data.json', {
    container: 'container',
    settings: {
      defaultNodeColor: '#ec5148',
+     defaultEdgeArrow: 'source'  // adding this line should add arrows?
    }
  });

可悲的是，这并没有产生不同的结果。

我也尝试修改图表本身的边缘

"edges": [
 {
    "id": "e0",
    "source": "n0",
    "target": "n1",
+   "arrow": "source"
 },
 ...,
 ]

但这再次没有效果。

更复杂的例子

在this pull request中添加了边缘箭头渲染。这链接到几个示例here和here

Answer 1

我自己一直在努力解决这个问题。看起来sigma.js在过去几个月中经历了重大的重新设计，示例中的代码来自旧版本的sigma.js。

他们确实能够渲染箭头，但生成这些箭头的设置已经改变，一些选项丢失了（你不再指定目标，源或两者;你只能使用目标）：

"edges": [
{
    "id": "e0",
    "source": "n0",
    "target": "n1",
+    "type": "arrow",
},
...,
]

“curvedArrow”也是类型的有效选项。

有关详细信息，请参阅此问题脚本：https://github.com/jacomyal/sigma.js/pull/219。

Answer 2

我努力奋斗了几个小时。我可以在https://www.bsimard.com/2018/04/25/graph-viz-with-sigmajs.html上找到一个有效的示例。

您需要的东西： -在节点属性中添加“类型：“箭头”

"edges": [
{
  "id": "e0",
  "source": "n0",
  "target": "n1",
+ "type": "arrow",
},
 ...,
]

并在Sigma构造函数中设置minArrowSize，对我来说，它也仅适用于画布。

s = new sigma({
 graph: data,
 renderer: {
  container: document.getElementById('graph-container'),
  type: 'canvas'
 },
 settings: {
  minArrowSize: 10
 }
});