Author: | DavidBanksNZ |
---|---|
Views Total: | 3,393 views |
Official Page: | Go to website |
Last Update: | July 19, 2018 |
License: | MIT |
Preview:

Description:
SimpleDiagram.js is a small yet robust JavaScript library that makes it easy to draw simple diagrams with nodes and links using D3.js and SVG element.
Basic usage:
To get started, you must have D3.js JavaScript library in your web project.
<script src="d3.min.js"></script>
And then load the SimpleDiagram.js and SimpleDiagram.css in the document.
<link rel="stylesheet" href="SimpleDiagram-0.2.css"> <script src="SimpleDiagram-0.2.min.js"></script>
Create a container element for your diagram.
<div id="diagram"></div>
Create a new instance with options.
var diagram = new SimpleDiagram('#diagram', { /* options */ });
Create an array of nodes for the diagram.
var nodes = [ {name: 'A', row: 2, column: 2, connectsTo: 'D'}, {name: 'B', row: 2, column: 5, connectsTo: 'D'}, {name: 'C', row: 2, column: 8, connectsTo: 'D'}, {name: 'D', row: 5, column: 5, connectsTo: 'F'}, {name: 'E', row: 8, column: 2, connectsTo: 'F'}, {name: 'F', row: 8, column: 5} ];
Draw the nodes.
nodes.forEach(function(node) { diagram.addNode({ name: node.name, label: node.name, row: node.row, column: node.column }); });
Draw the links.
nodes.forEach(function(node) { if (!node.connectsTo) return; diagram.addLine({ from: node.name, to: node.connectsTo }); });
Default settings for each diagram. These can be over-ridden in the SimpleDiagram constructor function.
addGrid: true, cellSize: 25, numRows: 10, numColumns: 10, margin: 1, interactive: true
Changelog:
07/19/2018
- Updated to latest D3 v5.