javascript - Sigma 曲线和 curvedArrow 边缘类型呈现为一条线

Question

我正在摆弄 Sigma，我似乎无法让线条弯曲。常规箭头可以正常工作，但弯曲的箭头不行。

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

A Github user通过指定 Canvas 渲染器解决了这个问题。

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

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