Paths and colors

Sigma v4 gives you full control over edge appearance through the primitives and styles system. You can combine different path geometries and fill layers.

import Graph from "graphology";
import Sigma, { DEFAULT_STYLES } from "sigma";
import {
  extremityArrow,
  layerDashed,
  layerFill,
  layerGradient,
  layerPlain,
  pathCurved,
  pathCurvedS,
  pathLine,
  pathStepCurved,
  sdfCircle,
  sdfTriangle,
} from "sigma/rendering";

const container = document.getElementById("sigma-container") as HTMLElement;

const SOURCE_COLOR = "#7E3D9C";
const TARGET_COLOR = "#ED8666";

// Each row has its own path:
const PATHS = ["straight", "curved", "stepCurved", "curvedS"] as const;

// Each column shows edges fillings and extremities in its own way:
const COLUMNS = [
  { useGradient: true },
  { head: "arrow" },
  { head: "arrow", tail: "arrow", useGradient: true },
  { dashSize: 5, dashColor: "#ffffff99" },
  { head: "arrow", dashSize: 10, dashColor: "#ffffff99", useGradient: true },
];

const graph = new Graph();
PATHS.forEach((path, row) => {
  COLUMNS.forEach((config, col) => {
    const [x, y] = [col * 120, -row * 80];
    const source = graph.addNode(`${path}-${col}-source`, { x: x - 30, y, color: SOURCE_COLOR });
    const target = graph.addNode(`${path}-${col}-target`, {
      x: x + 30,
      y: y + 30,
      color: TARGET_COLOR,
      shape: "triangle",
    });
    graph.addEdge(source, target, { size: 6, path, curvature: path === "curved" ? 0.3 : 0, ...config });
  });
});

new Sigma(graph, container, {
  primitives: {
    nodes: {
      shapes: [sdfCircle(), sdfTriangle()],
      layers: [layerFill()],
    },
    edges: {
      variables: {
        dashColor: { type: "color", default: "#000" },
        dashSize: { type: "number", default: 0 },
        useGradient: { type: "boolean", default: false },
      },
      paths: [pathLine(), pathCurved(), pathStepCurved(), pathCurvedS()],
      extremities: [extremityArrow()],
      layers: [
        layerPlain({ color: { node: "source" } }),
        layerGradient({
          stops: [{ node: "source" }, { node: "target" }],
          enabled: { attribute: "useGradient" },
        }),
        layerDashed({
          dashColor: { attribute: "dashColor" },
          dashSize: { attribute: "dashSize" },
          gapSize: { value: 10 },
        }),
      ],
    },
  },
  styles: {
    nodes: [DEFAULT_STYLES.nodes, { size: 12, shape: { attribute: "shape" } }],
    edges: [
      DEFAULT_STYLES.edges,
      { path: { attribute: "path" }, head: { attribute: "head" }, tail: { attribute: "tail" } },
    ],
  },
  settings: {
    renderEdgeLabels: true,
    itemSizesReference: "positions",
    autoRescale: true,
  },
});

Edge paths

Sigma ships with five built-in path types:

Path	Description
`pathLine()`	Direct line between source and target
`pathCurved()`	Quadratic Bezier curve (configurable curvature)
`pathStep()`	Right-angle step (horizontal then vertical)
`pathStepCurved()`	Step with rounded corners
`pathCurvedS()`	S-shaped cubic curve

Declare which paths your graph uses in primitives.edges.paths, then assign them per-edge via styles.

For arrowheads and other endpoint shapes, see the Extremities documentation.

Edge colors

Edge colors work like node colors. Set them in the graph data and read them via styles:

graph.addEdge("a", "b", { color: "#e63946" });

new Sigma(graph, container, {
  styles: {
    edges: [{ color: { attribute: "color" } }],
  },
});

Edge layer color options (like layerPlain()’s color, or layerDashed()’s dashColor and gapColor) accept three forms:

A constant CSS color string (e.g. "#e63946");
{ attribute } to read a per-edge color from graph data;
{ node: "source" } or { node: "target" } to use an endpoint node’s color.

Node references are read live from the GPU: edges follow their node’s color through hover effects and state changes, with no per-edge data to maintain.

new Sigma(graph, container, {
  primitives: {
    edges: {
      // Every edge wears its source node's color:
      layers: [layerPlain({ color: { node: "source" } })],
    },
  },
});

For dashed and gradient edges, and how layers compose, see Fill layers.

For more on the styles and primitives system, see Styles and primitives.