Visualización interactiva de gráficos mediante D3. js-ggraph

Vista prévia

Descripción

ggraph es una biblioteca interactiva de visualización de gráficos que le permite fusionar, dividir y eliminar datos desordenados utilizando el familiar < a href = "https:/d3js.org/" target = "_ blank" rel = "noopener" > D3. js biblioteca.

Funcionamiento

Cargue la biblioteca D3. js necesaria en el proyecto Web.

<script src="//d3js.org/d3.v4.min.js"></script>

Descargue y cargue los archivos JavaScript y CSS del ggraph de la siguiente siguiente:

<link rel="stylesheet" href="ggraph/ggraph.min.css">
<script src="ggraph/ggraph.min.js"></script>

Cree un contenedor en el que desee colocar el gráfico.

<div id="container"></div>

Prepare sus datos de la siguiente manera:

var graph = {


nodes:[



{"type": "name", "id": "elizabeth vittor"},



 {"type": "name", "id": "john thain (e-mail)"},



 {"type": "email", "id": "[email protected]"}



...


],


links: [



{source: "Maria West", target: "Hazel Santiago", value:100},



{source: "Maria West", target: "Sheldon Roy"},



{source: "Hazel Santiago", target: "Sheldon Roy"},



...


]
}

Convierta los datos con un objeto D3 válido:

converted = ggraph.convert(graph);

Inicializar el ggraph.

ggraph.init('container');

Represente el gráfico dentro del contenedor.

ggraph.draw(converted);

Fecha de fusión:

// Merge selected
ggraph.merge(selection.all());

// Into single group
ggraph.merge(['Maria West', 'Sheldon Roy']);

// Into several groups
ggraph.merge([

['A', 'B'],

['C', 'D']
]);

Nodos divididos:

ggraph.split(['Maria West', 'Sheldon Roy']);

Eliminar nodos:

ggraph.remove(['Maria West', 'Hazel Santiago']);