Custom size handling

By default, sigma rescales node and edge sizes to fit the viewport and uses square-root zoom scaling so that elements grow moderately as you zoom in. These defaults work well for most graphs, but some layouts require more control.

You can try changing the settings below and zoom in/out to see how each combination affects node and edge sizing:

import Graph from "graphology";
import Sigma from "sigma";
import { registerControls } from "../_controls";
import { sdfSquare } from "sigma/rendering";
import { DEFAULT_STYLES } from "sigma/types";

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

const { autoRescale, itemSizesReference, zoomScaling } = registerControls({
  autoRescale: {
    type: "select",
    label: "autoRescale",
    default: "true",
    options: [
      { label: "true", value: "true" },
      { label: "false", value: "false" },
      { label: "once", value: "once" },
    ],
  },
  itemSizesReference: {
    type: "select",
    label: "itemSizesReference",
    default: "screen",
    options: [
      { label: "screen", value: "screen" },
      { label: "positions", value: "positions" },
    ],
  },
  zoomScaling: {
    type: "select",
    label: "zoomToSizeRatioFunction",
    default: "sqrt",
    options: [
      { label: "sqrt (default)", value: "sqrt" },
      { label: "linear", value: "linear" },
      { label: "constant", value: "constant" },
    ],
  },
});

const ZOOM_FUNCTIONS: Record<string, (ratio: number) => number> = {
  sqrt: Math.sqrt,
  linear: (ratio: number) => ratio,
  constant: () => 1,
};

const graph = new Graph();

// Grid layout with varying sizes
const COLS = 8;
const ROWS = 6;
const SPACING = 100;
const COLORS = ["#e22653", "#277da1", "#33cc33", "#ff9900", "#9b59b6", "#1abc9c"];

for (let row = 0; row < ROWS; row++) {
  for (let col = 0; col < COLS; col++) {
    const id = `${row}-${col}`;
    graph.addNode(id, {
      x: col * SPACING,
      y: -row * SPACING,
      color: COLORS[(row + col) % COLORS.length],
    });

    if (col > 0) graph.addEdge(`${row}-${col - 1}`, id);
    if (row > 0) graph.addEdge(`${row - 1}-${col}`, id);
  }
}

let autoRescaleValue: boolean | "once";
if (autoRescale === "true") autoRescaleValue = true;
else if (autoRescale === "once") autoRescaleValue = "once";
else autoRescaleValue = false;

new Sigma(graph, container, {
  settings: {
    autoRescale: autoRescaleValue,
    itemSizesReference: itemSizesReference as "screen" | "positions",
    zoomToSizeRatioFunction: ZOOM_FUNCTIONS[zoomScaling],
  },
  primitives: {
    nodes: {
      shapes: [sdfSquare()],
    },
  },
  styles: {
    edges: [
      DEFAULT_STYLES.edges,
      {
        size: 10,
        color: "darkgrey",
      },
    ],
    nodes: [
      DEFAULT_STYLES.nodes,
      {
        size: 10,
      },
    ],
  },
});

Result Source

View source Open

Default behavior

Out of the box, sigma does two things:

1. Auto-rescale: Node positions are rescaled so the graph fits optimally in the viewport. Sizes are not rescaled, they remain as specified in the graph data.
2. Square-root zoom scaling: When you zoom in, node sizes grow proportionally to the square root of the zoom ratio. This keeps nodes visible at all zoom levels without overwhelming the view.

Custom zoom-to-size function

The zoomToSizeRatioFunction setting controls how sizes change as you zoom. The default is Math.sqrt:

// Default: sizes grow with the square root of the zoom ratio
const renderer = new Sigma(graph, container, {
  settings: { zoomToSizeRatioFunction: Math.sqrt },
});

For sizes that stay constant regardless of zoom:

const renderer = new Sigma(graph, container, {
  settings: { zoomToSizeRatioFunction: () => 1 },
});

For sizes that scale linearly with zoom (items grow and shrink at the same rate as the camera moves):

const renderer = new Sigma(graph, container, {
  settings: { zoomToSizeRatioFunction: (ratio) => ratio },
});

Using positions as size reference

By default, sizes are in “screen pixels at default zoom ratio” (itemSizesReference: "screen"). If you want sizes to be in the same coordinate space as node positions, you use itemSizesReference: "positions":

const renderer = new Sigma(graph, container, {
  settings: { itemSizesReference: "positions" },
});