dgraph-javascript/example-complex.js

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);