@sigma/edge-curve

Sigma.js - Edge curve renderer

This package contains a curved edges renderer for sigma.js.

The edges are rendered as quadratic Bézier curves. This package exports by default EdgeCurveProgram, the renderer for sigma. Edges can have a curvature value, to make them more or less curved.

It also exports DEFAULT_EDGE_CURVATURE (the default curvature value for edges) and indexParallelEdgesIndex, a utility function to find parallel edges, and help adapt their curvature for display (see the dedicated example to see how it works)

How to use

Within your application that uses sigma.js, you can use @sigma/edge-curve as following:

import EdgeCurveProgram from "@sigma/edge-curve";

const graph = new Graph();
graph.addNode("a", { x: 0, y: 0, size: 10, label: "Alex" });
graph.addNode("b", { x: 10, y: 10, size: 10, label: "Bill" });
graph.addEdge("a", "b", { type: "curved" });

const sigma = new Sigma(graph, container, {
  edgeProgramClasses: {
    curved: EdgeCurveProgram,
  },
});

Please check the related Storybook for more advanced examples.