This is a 2d graph renderer which uses PIXI.js as a rendering engine.
This code will render interactive graph:
// let's create a simple graph with two nodes, connected by edge:
var graph = require('ngraph.graph')();
graph.addLink(1, 2);
// Create a pixi renderer:
var pixiGraphics = require('ngraph.pixi')(graph);
// And launch animation loop:
pixiGraphics.run();To run it, please refer to example folder.
With npm do:
npm install ngraph.pixi
To compile (or browserify) local examples run:
npm start
ngraph.pixi allows you to customize various aspects of graph appearance
When working with ngraph.graph each node may have associated data. This data
is considered a data model of a node. ngraph.pixi lets clients convert associated
data model into UI model for node (createNodeUI()) or link (createLinkUI()).
Results of these methods are then used to actually render a node (renderNode())
or a link (renderLink()).
// add two nodes with associated data model
graph.addNode('user1', {sex: 'male'});
graph.addNode('user2', {sex: 'female'});
// Construct UI model for node:
pixiGraphics.createNodeUI(function (node) {
return {
width: 2 + Math.random() * 20,
// use settings from node's data
color: node.data.sex === 'female' ? 0xFF0000 : 0x0000FF
};
});
// tell pixi how we want to render each UI model:
pixiGraphics.renderNode(function (nodeUIModel, ctx) {
ctx.lineStyle(0);
ctx.beginFill(nodeUIModel.color);
var x = nodeUIModel.pos.x - nodeUIModel.width/2,
y = nodeUIModel.pos.y - nodeUIModel.width/2;
ctx.drawRect(x, y, nodeUIModel.width, nodeUIModel.width);
});There are several reasons for such separation of concerns. One is performance: By constructing UI model once we are saving CPU cycles at rendering time. Another reason for separation - you can have multiple renderers render the same graph without interfering with each other.
You can change default physics engine parameters by passing physics object inside
settings:
var createPixiGraphics = require('ngraph.pixi');
var pixiGraphics = createPixiGraphics(graph, {
physics: {
springLength: 30,
springCoeff: 0.0008,
dragCoeff: 0.01,
gravity: -1.2,
}
})To read more information about each of these and even more properties, please refer to physics engine documentation.
This library was created as part of ngraph project. If you like PIXI and want to help with graph rendering, your contribution is absolutely welcomed and appreciated. Here are just some things which could be done better:
- Renderer currently works with
PIXI.Graphics, which does not let rendering custom text on the screen PIXI.Graphicshas decent pressure on garbage collector, since all primitives are rerendered on each frame. This can be improved by implementing customPIXI.DisplayObject- more info- Mouse events are not exposed externally from the renderer. It will be nice to let clients of this library to react on user actions.
- While touch event is supported by PIXI.js it needs to be added to the renderer.
- Need methods like pan/zoom to be exposed via API
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent