Come disegnare una mappa mentale

Sto lavorando ad un algoritmo per disegnare una mappa mentale. Il punto principale è quello di organizzare in modo intelligente i nodi, in modo che non ci siano sovrapposizioni e sia ben distribuito. A titolo di esempio si veda questo screenshot (da MindNode):Come disegnare una mappa mentale

what it should look like

Tutte le idee su come organizzare tale struttura ben, dato lo spazio che ogni nodo occupa? Conosci qualche codice che potrei esaminare (qualcosa di più semplice di graphviz)?

Prima che si verifichi, non sto cercando algoritmi di "simulazione fisica" come this o programmi finiti come punti. Alla fine voglio implementarlo in JS, ma per capire l'algoritmo ogni linguaggio va bene.

fonte

2012-04-27 lucas clemente

Immagino che si possa fare questo solo con i CSS. Fornisci le classi giuste con JS ai tuoi nodi e i CSS si prenderanno cura di organizzarli secondo necessità.

Ad esempio, è possibile impostare margin: 1em 0 1em 0 in ogni nodo in modo che abbia sufficiente spazio, ecc ecc

fonte

2012-04-27 22:49:27

sono i CSS abbastanza intelligente ora per disegnare spline adatti come nello schema? –

Si può giocare con 'border-radius' per questo, sì. Ma usare 'canvas' sarebbe meglio immagino. L'avvertenza è che il CSS non farà magie per te e dovrai calcolare ogni volta che aggiungi un nodo. –

Hmm. I raggi di confine non circolari sono piuttosto fugaci nel mio browser (Firefox), e anche ignorandolo, non penso che tu possa produrre le curve sopra usando solo ellissi. Ma forse le curve non sono ciò a cui realmente interessa l'interlocutore: viene menzionato solo il posizionamento. –

risposta

Problemi correlati