Направленные ребра в sigma.js - минимальный пример

Вопрос

Что необходимо для создания направленных ребер в sigma.js? Я ищу минимальный пример, который предпочтительно основывается на минимальном примере в настоящее время на домашней странице .

Попытки

Я попытался адаптировать пример минимального графа на странице sigma.js следующим образом

  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"
 },
 ...,
 ]

Но опять это не имело никакого эффекта.

Более сложные примеры

В этот запрос на перенос добавлен рендеринг стрелки края. Это связано с несколькими примерами здесь и здесь

Ответ 1

Я сам боролся с этой проблемой. Похоже, что sigma.js подвергся серьезной редизайне за последние несколько месяцев, а код из примеров - из более старой версии sigma.js.

У них есть возможность визуализации стрелок, но настройки для их создания были изменены, а некоторые из них были потеряны (вы больше не можете указать цель, источник или и то, и другое, вы можете использовать только цель):

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

"curvedArrow" также является допустимым параметром для типа.

Подробнее см. в этом расшифровке: https://github.com/jacomyal/sigma.js/pull/219.

Ответ 2

Я боролся с этим в течение нескольких часов. Мне удалось найти рабочий пример на https://www.bsimard.com/2018/04/25/graph-viz-with-sigmajs.html.

Вещи, которые вам нужны: - добавить 'type: "arrow"' в свойства узла

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

и в конструкторе Sigma установите minArrowSize, также для меня это работает только с canvas.

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