Link Search Menu Expand Document
Graphology

Graphology Canvas

Canvas rendering routines for graphology.

Installation 

npm install graphology-canvas

If you need to use this package’s functions in node, you will also need to install node-canvas thusly:

npm install canvas

If you experience any issue when installing the libray check that you have the required dependencies as listed here.

Usage

Pre-requisites

Each node’s position must be set before rendering a graph. Two attributes called x and y must therefore be defined for all the graph nodes. graphology-layout or graphology-layout-forceatlas2, for instance, can be used to give positions to nodes if they don’t have one already.

Rendering a graph in an arbitrary canvas context 

import {render} from 'graphology-canvas';

render(graph, context, settings);

Rendering asynchronously to avoid freezing main thread 

import {renderAsync} from 'graphology-canvas';

renderAsync(graph, context, settings, function () {
  console.log('Done!');
});

Rendering a graph to PNG in node 

import {renderToPNG} from 'graphology-canvas/node';

renderToPNG(graph, './graph.png', () => console.log('Done!'));
renderToPNG(graph, './graph.png', settings, () => console.log('Done!'));

Settings

  • width ?number 2048: width of the canvas. Will be the same as height if not provided.
  • height ?number 2048: height of the canvas. Will be the same as width if not provided.
  • padding ?number 20: padding to keep around the drawing.
  • nodes ?object: node-related settings:
    • defaultColor ?string #999: default color for nodes.
    • reducer ?function: reducer fonction for nodes taking the rendering settings, the node key and its attributes and tasked to return rendering info such as color, size etc.
  • edges ?object: node-related settings:
    • defaultColor ?string #ccc: default color for edges.
    • reducer ?function: reducer fonction for edges taking the rendering settings, the node key and its attributes and tasked to return rendering info such as color, size etc.

Async Settings

  • batchSize ?number 500: number of items to render on canvas on each animation frame, increase or decrease to tweak performance vs. UI availability.