Visualice estructuras de árbol jerárquico utilizando D3. js-D3-Mitch-Tree

Vista prévia

Descripción

La biblioteca de JavaScript D3-Mitch-Tree le permite renderizar un diagrama interactivo desde objetos/matrices JS para visualizar las estructuras jerárquicas de los árboles de una manera elegante.

Se ha creado con la biblioteca D3. js y admite la carga de zoom, panorámica, centrado y AJAX.

Funcionamiento

Cargue el núcleo de JavaScript y la hoja de estilos de D3-Mitch-Tree en el documento.

<script src="dist/js/d3-mitch-tree.min.js"></script>
<link rel="stylesheet" href="dist/css/d3-mitch-tree.min.css">

Cargue el tema predeterminado en el documento. También puede crear sus propios temas al igual que el D3-Mitch-Tree-Theme-default. CSS .

<link rel="stylesheet" href="dist/css/d3-mitch-tree-theme-default.min.css">

Defina los datos de árbol en los objetos/matrices de JavaScript de la siguiente manera:

// flat data
var data = [


{



"id": 1,



"name": "Animals",



"type": "Root",



"description": "A living organism that feeds on organic matter"


},


{



"id": 2,



"parentId": 1,



"name": "Carnivores",



"type": "Type",



"description": "Diet consists solely of animal materials"


},


// more data here
]

// nested data
var data = {


"id": 1,


"name": "Animals",


"type": "Root",


"description": "A living organism that feeds on organic matter",


"children": [{




"id": 2,




"name": "Carnivores",




"type": "Type",




"description": "Diet consists solely of animal materials",




"children": [





{






"id": 3,






"name": "Felidae",






"type": "Family",






"description": "Also known as cats",





}]


}]
};

Cree un nuevo objeto D3. mitchTree y establezca el origen de datos.

var treePlugin = new d3.mitchTree.boxedTree()


.setData(data)

Especifique el elemento contenedor para contener las estructuras de árbol.

var treePlugin = new d3.mitchTree.boxedTree()


.setData(data)


.setElement(document.getElementById("container-element"))

Inicialice el D3. mitchTree.

var treePlugin = new d3.mitchTree.boxedTree()


.setData(data)


.setElement(document.getElementById("container-element"))


.setIdAccessor(function(data) {



return data.id;


})


.setChildrenAccessor(function(data) {



return data.children;


})


.setBodyDisplayTextAccessor(function(data) {



return data.description;


})


.setTitleDisplayTextAccessor(function(data) {



return data.name;


})


.initialize();

Inicialice el D3. mitchTree.

var options = {


data: data,


element: document.getElementById("example"),


getId: function (data) {



return data.id;


},


getChildren: function (data) {



return data.children;


},


getBodyDisplayText: function (data) {



return data.description;


},


getTitleDisplayText: function (data) {



return data.name;


}
};
var treePlugin = new d3.MitchTree.BoxedTree(options).initialize();