dGraph/example-complex.js at master · speich/dGraph · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import {DirectedGraphLayout} from "./graph/DirectedGraphLayout.js";
import {SvgRenderer} from "./graph/SvgRenderer.js";

let graph, svg,
	graphData = {
		numLayer: 10, maxPerLayer: 3, nodeList: [
			{label: 'Turdus', layer: 0},
			{label: 'Parus', layer: 0},
			{label: 'Falco', layer: 0},
			{label: 'Rubecula', layer: 0},
			{label: 'Corvus', layer: 0},
			{label: 'Sturnus', layer: 0},
			{label: 'Mycteria', layer: 0},
			{label: 'Ciconia', layer: 0},
			{label: 'Cygnus', layer: 0},
			{label: 'Cathartes', layer: 0},
			{label: 'Anas', layer: 0},
			{label: 'Atticora', layer: 0},
			{label: 'Hirundo', layer: 0},
			{label: 'Jabiru', layer: 0},
			{label: 'Ara', layer: 0},
			{label: 'Fringilla', layer: 0},
			{label: 'ZUGANG', layer: 0},
			{label: 'Tigrisoma', layer: 1},
			{label: 'UMFANG', layer: 1},
			{label: 'Harpia', layer: 9},
			{label: 'Rynchops', layer: 3},
			{label: 'Larus', layer: 4},
			{label: 'Troglodytes', layer: 1},
			{label: 'Anthracothorax', layer: 5},
			{label: 'Pandion', layer: 1},
			{label: 'Egretta', layer: 1},
			{label: 'Thryothorus', layer: 6},
			{label: 'Ciconia', layer: 1},
			{label: 'Athene', layer: 8},
			{label: 'Anhinga', layer: 7},
			{label: 'Philomachus', layer: 7},
			{label: 'Tetrao', layer: 1},
			{label: 'Podiceps', layer: 1},
			{label: 'Poecile', layer: 4},
			{label: 'Asio', layer: 1},
			{label: 'Strix', layer: 2},
			{label: 'Hippophae', layer: 1},
			{label: 'Silvia', layer: 2},
			{label: 'Columba', layer: 1},
			{label: 'Lanius', layer: 1},
			{label: 'Merganser', layer: 1},
			{label: 'Anser', layer: 1},
			{label: 'Eudocimus', layer: 1},
			{label: 'Catoptrophorus', layer: 1},
			{label: 'Pluvialis', layer: 1},
			{label: 'Aythya', layer: 1},
			{label: 'Cinclus', layer: 3}
		], adjList: [
			[39],
			[41],
			[33, 45, 46],
			[36, 42],
			[36, 43],
			[36, 44],
			[38, 40],
			[38, 40],
			[17],
			[24],
			[34],
			[27],
			[25],
			[18],
			[22],
			[32],
			[31],
			[23],
			[35],
			[],
			[21, 28, 29],
			[28],
			[28],
			[26],
			[21, 29, 30],
			[28, 29, 30],
			[28, 29, 30],
			[20, 30],
			[19],
			[28],
			[28],
			[26],
			[23],
			[23],
			[35],
			[20],
			[37, 46],
			[46],
			[46],
			[46],
			[46],
			[46],
			[46],
			[46],
			[46],
			[46],
			[33]
		]
	};

graph = new DirectedGraphLayout({
	numLayer: graphData.numLayer
});
svg = new SvgRenderer({
	canvas: 'graphCanvas',
	gridSize: {
		meshWidth: 84,
		meshHeight: 66
	},
//        renderGrid: false
});

graph.render(graphData);
svg.render(graph);