Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/JosePedroDias/dagre-canvas
- Owner: JosePedroDias
- Created: 2015-03-02T17:11:08.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-03-02T17:16:15.000Z (over 9 years ago)
- Last Synced: 2024-08-01T12:34:34.568Z (3 months ago)
- Language: JavaScript
- Homepage: http://josepedrodias.github.io/dagre-canvas/index.html
- Size: 125 KB
- Stars: 9
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-starred - JosePedroDias/dagre-canvas - A simple canvas renderer for directed graphs based on dagre (others)
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 belowlayout: { // 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'
}
}
});
```