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 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'

		}

	}

});

```