arzoochina / ngraph.pixi

PIXI.js graph renderer

ngraph.pixi

This is a 2d graph renderer which uses PIXI.js as a rendering engine.

Example

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.

install

With npm do:

npm install ngraph.pixi

To compile (or browserify) local examples run:

npm start

Customization

ngraph.pixi allows you to customize various aspects of graph appearance

Nodes/Link

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.

Physics

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.

What is missing?

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.Graphics has decent pressure on garbage collector, since all primitives are rerendered on each frame. This can be improved by implementing custom PIXI.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

license

MIT