dagre-canvas

KO | EN

gitlite — search

#javascript #react #typescript #golang #go #linux #java #windows #cli #awesome-list #security #ios #openai #open-source

(★ 9)

A simple canvas renderer for directed graphs based on dagre

dagre-canvas 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# dagre-canvas

A simple canvas renderer for directed graphs based on <a href="https://github.com/cpettitt/dagre/" target="_blank">dagre</a>.

## 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'
		}
	}
});
```

dagre-canvas

dagre-canvas 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

dagre-canvas

dagre-canvas 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README