Creación de diagramas sencillos con nodos y vínculos mediante SVG y D3. js-SimpleDiagram. js

Vista prévia

Descripción

SimpleDiagram. js es una pequeña pero robusta biblioteca de JavaScript que facilita el dibujo de diagramas simples con nodos y enlaces utilizando el elemento D3. js y SVG.

¿Cómo funciona?

Para empezar, debe tener la biblioteca de JavaScript D3. js en su proyecto Web.

<script src="d3.min.js"></script>

Y luego cargue el SimpleDiagram. js y SimpleDiagram. CSS en el documento.

<link rel="stylesheet" href="SimpleDiagram-0.2.css">
<script src="SimpleDiagram-0.2.min.js"></script>

Cree un elemento contenedor para el diagrama.

<div id="diagram"></div>

Cree una nueva instancia con opciones.

var diagram = new SimpleDiagram('#diagram', {


/* options */
});

Cree una matriz de nodos para el diagrama.

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}
];

Dibuje los nodos.

nodes.forEach(function(node) {


diagram.addNode({



name: node.name,



label: node.name,



row: node.row,



column: node.column

});

});

Dibuja los enlaces.

nodes.forEach(function(node) {


if (!node.connectsTo)



return;


diagram.addLine({



from: node.name,



to: node.connectsTo

});

});

Configuración predeterminada para cada diagrama. Estos pueden ser sobremontados en el SimpleDiagram función constructora.

addGrid: true,
cellSize: 25,
numRows: 10,
numColumns: 10,
margin: 1,
interactive: true

Registro de cambios

07/19/2018

• Actualizado a la última D3 V5.