Un desarrollador reinventa el trazado de árboles para pantallas pequeñas
Una semana de trabajo para colocar árboles de herencia muy anchos en un espacio limitado, sin pasar por el reparto por profundidad que hacen las librerías de jerarquías.
El autor ha dedicado una semana a un problema de trazado concreto: cómo meter un árbol de herencia muy grande en una pantalla que no lo es. Las librerías habituales de jerarquías, d3-hierarchy entre ellas, tienden a agrupar todos los nodos de una misma profundidad o todas las hojas en la misma banda, y cuando hay muchos hermanos el diagrama se ensancha hasta volverse inservible. La salida fácil sería dibujar el árbol de izquierda a derecha en vez de arriba abajo, pero el autor la descarta sin darle muchas vueltas.
El texto es un desarrollo iterativo, con controles que van siguiendo las pruebas, y arranca por una parte prescindible: generar datos de prueba. No le valen letras aleatorias, así que toma las frecuencias de letras del inglés, las acumula, las normaliza para corregir el error de coma flotante y usa una búsqueda binaria sobre el vector acumulado para elegir cada letra. Alterna consonante y vocal de forma que no salgan pares impronunciables. Es un desvío, avisa, no el asunto central.
Nodos en SVG y conectores en escalón
El dibujo se hace con SVG a mano, no con canvas. Cada nodo es un elemento g con un text y un rect cuyo tamaño sale del getBBox del texto, y el contenido se centra con dominant-baseline en central. Medir primero y pintar después es lo que permite que la caja se ajuste al contenido.
Para las uniones usa un path de cuatro puntos en estilo escalón: sale del centro del borde inferior del padre, baja un trecho, avanza en horizontal hasta el centro del hijo y recorre la distancia que queda hacia abajo. Los comandos son M, V y H según toque. Las cajas delimitadoras se guardan en caché para no recalcularlas en cada paso, y el formato de entrada del árbol es texto plano, con el padre a la izquierda, una flecha y la lista de hijos, editable desde la propia página.
El interés está en la estrategia, no en el envoltorio: frente a colocar por profundidad, el autor busca una distribución que aproveche mejor el ancho disponible. Una distribución por profundidad es cómoda de calcular pero desperdicia el eje horizontal justo cuando hay más nodos.
Lo que no hay, por lo que se ve en la entrada, es repositorio ni paquete instalable: es un cuaderno de trabajo personal, sin anuncio de librería ni de versión. El algoritmo de posicionamiento completo tampoco aparece en la parte publicada, que se queda en los cimientos. Para quien tenga que dibujar jerarquías anchas en una interfaz, la entrada deja ideas que se pueden copiar, no una dependencia que añadir al package.json.
