ngraph.fabric
v0.0.0ngraph.fabric
This is a 2d graph renderer, which uses Fabric.js as a rendering engine. This library is a part of ngraph project.
NB: Image above was rendered from Node.js. Click on the image to see interactive version rendered by the same code in your browser.
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 fabric renderer:
var fabricGraphics = require('ngraph.fabric')(graph);
// And launch animation loop:
fabricGraphics.run();
Use mouse wheel to zoom in/zoom out, drag canvas/nodes with left mouse button. More examples are available in the examples folder. You can also play with browserified examples here:
- Default UI rendering
- Custom look and feel for nodes and links
- Add/remove graph's elements dynamically
- Hover mouse over a node to get a wave
Customization
There are many ways to customize fabric graphics. I made them symmetrical to ngraph.pixi
graphics. See README for more details.
What is missing?
If you like fabric.js and want to help with graph rendering, your contribution is absolutely welcomed and appreciated.
If you know how to improve rendering speed with fabric.js
please let me know.
Currently it does not handle well graphs with more than 500 node and 1000 links.
Why fabric?
Fabric has very well documented API and you can use any of those primitives as
your rendering tools. What makes it absolutely awesome: Same code can be executed
in the browser and on the server using node.js
. Thus you can reuse code to render
static images of graphs or animate them in the browser.
install
With npm do:
npm install ngraph.fabric
license
MIT
Metadata
- MIT
- Whatever
- Andrei Kashcha
- released 1/16/2014