Сигма-кривая и криволинейный тип ребра рендеринга в виде линии

Question

Я бездельничаю с Сигмой, и я не могу заставить линии изгибаться. Обычные стрелки работают нормально, но изогнутые - нет.

var graphData = {
  "nodes": [
    { "id": "n0", "label": "A node", "x": 0, "y": 0, "size": 3 },
    { "id": "n1", "label": "Another node", "x": 3, "y": 1, "size": 2 },
    { "id": "n2", "label": "And a last one", "x": 1, "y": 3, "size": 1 },

    { "id": "n3", "label": "A node", "x": 2, "y": 0, "size": 8, "color": "#48ec51" },
    { "id": "n4", "label": "Another node", "x": 0, "y": 2, "size": 5, "color": "#5148ec" },
    { "id": "n5", "label": "And a last one", "x": 2, "y": 3, "size": 3, "color": "#ec48ec" }
  ],
  "edges": [
    { "id": "e0", "source": "n0", "target": "n1", "type": "curvedArrow", "size": 5 },
    { "id": "e1", "source": "n1", "target": "n2", "type": "curvedArrow" },
    { "id": "e2", "source": "n2", "target": "n0", "type": "curvedArrow" },

    { "id": "e3", "source": "n3", "target": "n4", "type": "arrow", "size": 3 },
    { "id": "e4", "source": "n4", "target": "n5", "type": "arrow", "size": 2 },
    { "id": "e5", "source": "n5", "target": "n3", "type": "arrow", "size": 1 }
  ]
};

// Initialize the Sigma graph
const sigmaInstance = new sigma({ 
  graph: graphData,
  container: 'sigma-container',
  settings: {
    defaultNodeColor: '#ec5148',
    defaultEdgeType: 'arrow',
    minEdgeSize: 5,
    maxEdgeSize: 5
  }
});

// Refresh the edges. Comment this out to see the arrows...
var types = [ 'line', 'curve', 'arrow', 'curvedArrow' ];
sigmaInstance.graph.edges().forEach(function(e) { e.type = types[3]; });
sigmaInstance.refresh();

// Set initial zoom
sigmaInstance.cameras[0].goTo({ x: 1, y: 1, angle: 0, ratio: 2.0 });

// Add drag listener
let dragListener = sigma.plugins.dragNodes(sigmaInstance, sigmaInstance.renderers[0]);

body {
   background: #ddd;
 }
 h1 {
   text-align: center;
 }
 .sigma-wrapper {
   max-width: 300px;
   background: #fff;
   border: 2px solid #AAA;
   margin: auto;
 }
 #sigma-container {
   max-width: 300px;
   height: 300px;
 }

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/sigma.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.parsers.json.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.plugins.dragNodes.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.renderers.parallelEdges.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jacomyal/sigma.js/9c940aa9/src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jacomyal/sigma.js/9c940aa9/src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jacomyal/sigma.js/9c940aa9/src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<h1>Sigma JS Workbench</h1>
<div class="sigma-wrapper">
  <div id="sigma-container"></div>
</div>

Answer 1

Пользователь Github решил эту проблему, указав средство визуализации canvas.

const sigmaInstance = new sigma({ 
  graph: graphData,
  container: 'sigma-container',
  ...

  // canvas renderer
  // ===============
  renderer: {
    container: document.getElementById('sigma-container'),
    type: sigma.renderers.canvas
  }
});

Answer 2

Я знаю, что это запоздалый ответ, но надеюсь, что он все еще поможет кому-то с этой проблемой.

Если вы используете файл минифицированной библиотеки sigma.min.js для включения основной библиотеки sigma, то проблема, скорее всего, исходит оттуда. Если вы откроете gruntfile, используемый для компиляции минифицированного файла, имена файлов, указывающие на файлы с изогнутыми краями, будут неправильными:

'src/renderers/canvas/sigma.canvas.edges.dotCurve.js',
'src/renderers/canvas/sigma.canvas.edges.arrow.js',
'src/renderers/canvas/sigma.canvas.edges.dotCurvedArrow.js'

они должны быть такими (без точки):

'src/renderers/canvas/sigma.canvas.edges.curve.js',
'src/renderers/canvas/sigma.canvas.edges.arrow.js',
'src/renderers/canvas/sigma.canvas.edges.curvedArrow.js'

Надеюсь, это помогло!