Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/JosePedroDias/dagre-canvas

A simple canvas renderer for directed graphs based on dagre
https://github.com/JosePedroDias/dagre-canvas

Last synced: 5 days ago
JSON representation

A simple canvas renderer for directed graphs based on dagre

Awesome Lists containing this project

README

        

# dagre-canvas

A simple canvas renderer for directed graphs based on dagre.

## example:

Example taken from the dagre repository.

Some node and edges had their default styles overridden for demo purposes.

Check it [here](http://josepedrodias.github.io/dagre-canvas/index.html)

```javascript
// returns a canvas element
dagreCanvas({

nodes: [
{id:'kspacey', label:'Kevin Spacey'},
{id:'swilliams', label:'Saul Williams'},
{id:'bpitt', label:'Brad Pitt', labelColor:'red', backgroundColor:'#DFD'},
{id:'hford', label:'Harrison Ford'},
{id:'lwilson', label:'Luke Wilson', fontFamily:'monospace', fontStyle:'bold', fontHeight:20},
{id:'kbacon', label:'Kevin Bacon'}
],

edges: [
{from:'kspacey', to:'swilliams', label:'a'},
{from:'swilliams', to:'kbacon', label:'b', lineColor:'orange', labelColor:'blue', lineWidth:5},
{from:'bpitt', to:'kbacon', label:'c'},
{from:'hford', to:'lwilson', label:'d', backgroundColor:'orange', fontFamily:'monospace', fontStyle:'bold italic', fontHeight:9},
{from:'lwilson', to:'kbacon', label:'e'}
],

// ALL UNITS ARE IN PIXELS! FONT SIZES TOO
// these are the default values for every parameter below

layout: { // https://github.com/cpettitt/dagre/wiki#configuring-the-layout

rankdir: 'TB', // 'TB' | 'BT' | 'LR' | 'RL'
nodesep: 50,
edgesep: 10,
ranksep: 50,
marginx: 0,
marginy: 0,

nodes: {
fontFamily: 'sans-serif',
fontHeight: 14,
fontStyle: '', // '' | 'bold' | 'italic' | 'bold italic'
padding: 6,
labelColor: '#000',
backgroundColor: '#EEE'
},

edges: {
fontFamily: 'sans-serif',
fontHeight: 12,
fontStyle: '', // '' | 'bold' | 'italic' | 'bold italic'
padding: 1,
lineWidth: 1,
lineColor: '#777',
labelColor: '#000'
}
}
});
```