@sigma/edge-curve

Sigma.js - Edge curve renderer

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

It handles various aspects, such as:

• Varying curvatures
• Arrow heads
• Parallel curved edges

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:

• EdgeCurvedArrowProgram, a program with defaults settings adapted to render edges as curved arrows
• createEdgeCurveProgram, the factory to build a CustomEdgeCurveProgram with customized settings
• DEFAULT_EDGE_CURVATURE, the default curvature value for edges
• 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.