| name | ez-tree |
| description | Visualización de árboles y grafos en 3D — útil para datos jerárquicos y mapas de decisión. |
| version | 1.0.0 |
| tags | ["3D","trees","graphs","visualization","hierarchy","three.js"] |
EZ-Tree — Visualización 3D de Árboles y Grafos
Resumen
Visualización de árboles y grafos en 3D — útil para datos jerárquicos y mapas de decisión. 1.4k⭐.
Repo de referencia
- GitHub:
github.com/dgreenheck/ez-tree
- Lenguaje: JavaScript
- Licencia: MIT
Instalación
npm install ez-tree
git clone https://github.com/dgreenheck/ez-tree.git
cd ez-tree && npm install
Uso Básico
import EzTree from 'ez-tree';
const tree = new EzTree({
container: '#tree-container',
data: {
name: 'Root',
children: [
{ name: 'A', children: [
{ name: 'A1' },
{ name: 'A2' }
]},
{ name: 'B', children: [
{ name: 'B1' }
]}
]
},
layout: 'radial',
colors: ['#2563eb', '#f97316', '#10b981'],
});
tree.render();
tree.on('click', (node) => {
console.log('Clicked:', node.name);
});
Patrones Clave
- Layouts: Radial, hierárquico, force-directed
- Interacción: Click, hover, zoom, pan
- Custom: Colores, tamaños, formas personalizables
- Animation: Transiciones suaves entre layouts
- Export: PNG, SVG de la visualización
Integración con Mastermind
- Complementa
threejs-3d-maps — visualización jerárquica vs geoespacial
- Útil para
competitive-intelligence — mapas de competencia
- Ideal para
dspy — visualización de programas
- Reemplaza D3.js trees para visualización 3D
Pitfalls
- Tamaño: Datos muy grandes (>1000 nodos) pueden ser lentos
- Layout: El layout radial no siempre es el óptimo
- Dependencias: Requiere Three.js
- Mobile: Puede no funcionar bien en móviles
Referencias