Necesito un mapa de árbol como el de plotly: https://plotly.com/python/treemaps/ para una aplicación de reacción, que admita una funcionalidad de zoom, para que se puedan explorar varias capas, sin necesidad de mostrar todas las capas a la vez . No puedo usar plotly, porque parece violar el CSP y no pude encontrar ninguna otra biblioteca, con un ejemplo que funcionó para mí.
Sé pensar en escribir un componente de mapa de árbol personalizado. Cada mapa de árbol que probé se creó como SVG. Sin embargo, no tengo experiencia con SVG y preferiría construir el diagrama de árbol con elementos div. Como no pude encontrar ninguna solución que use elementos div, me pregunto si hay alguna trampa, que no conozco.
Sé que demasiados elementos DOM pueden ser un problema. Pero no necesito mostrar más de 2 capas a la vez, que nunca son más de 200 elementos.
Este ejemplo es el comienzo de algo que podría tomar la forma de un árbol. Está hecho con divs basados en los data del objeto.
Empecé a diseñarlo, pero requiere algo de experimentación y estructuración...
const data = { '1': { '1.1': { '1.1.1': {} }, '1.2': {} }, '2': { '2.1': {}, '2.2': { '2.2.1': {}, '2.2.2': {} } } }; const tree = document.getElementById('tree'); const insertchildren = (parent, obj, level) => { Object.keys(obj).forEach(key => { let child = document.createElement('div'); child.setAttribute('class', `node v${Object.keys(obj[key]).length} l${level}`); let title = document.createElement('div'); title.setAttribute('class', 'title'); title.textContent = key; child.appendChild(title); parent.appendChild(child); insertchildren(child, obj[key], level + 1); }); }; insertchildren(tree, data, 1); div#tree { display: flex; flex-direction: row; } .l1 { flex-direction: column; } .l2 { flex-direction: row; } .l3 { flex-direction: column; } div.node { display: flex; padding: 2px; border: solid thin black; margin: 2px; box-sizing: border-box; } .title { width: 100%; } .v0 { height: 100px; } <div id="tree" class="v2"></div>