@sigma/edge-curve
v3.0.0-beta.16
Published
An edge program that renders edges as curves for sigma.js
Downloads
10,155
Readme
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 arrowscreateEdgeCurveProgram
, the factory to build aCustomEdgeCurveProgram
with customized settingsDEFAULT_EDGE_CURVATURE
, the default curvature value for edgesindexParallelEdgesIndex
, a utility function to find parallel edges, and help adapt theircurvature
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.