Cómo dibujar un mapa mental

Estoy trabajando en un algoritmo para dibujar un mapa mental. El punto principal es organizar inteligentemente los nodos, para que no haya superposiciones y se vea bien distribuido. A modo de ejemplo, véase la captura de pantalla (de MindNode):Cómo dibujar un mapa mental

what it should look like

Cualquier ideas sobre cómo organizar esta estructura muy bien, teniendo en cuenta el espacio que ocupa cada nodo? ¿Conoces algún código que pueda analizar (algo un poco más simple que graphviz)?

Antes de que aparezca, no estoy buscando algoritmos de "simulación física" como this, o programas terminados como dot. Al final quiero implementarlo en JS, pero para entender el algoritmo, cualquier lenguaje está bien.

Fuente

2012-04-27 lucas clemente

Supongo que puedes hacer esto solo con CSS. Da las clases correctas con JS a tus nodos, y CSS se encargará de organizarlos según sea necesario.

Por ejemplo, se puede establecer margin: 1em 0 1em 0 en cada nodo para que tenga suficiente espacio, etc, etc

Fuente

2012-04-27 22:49:27

usa CSS ahora lo suficientemente inteligente como para sacar las estrías adecuadas como en el diagrama? –

Podría jugar con 'border-radius' para esto, sí. Pero supongo que usar 'canvas' sería mejor. La advertencia es que CSS no hará magia para usted y tendrá que calcular cada vez que agregue un nodo. –

Hmm. Los radios de frontera no circulares son bastante fugitivos en mi navegador (Firefox), e incluso haciendo caso omiso de eso, no creo que puedas producir las curvas anteriores utilizando solo elipsis. Pero tal vez las curvas no son lo que realmente le interesa al interrogador: solo se menciona el posicionamiento. –

Respuesta

Cuestiones relacionadas