如何繪製思維導圖

我正在研究繪製思維導圖的算法。要點是智能地排列節點，以便沒有重疊，並且看起來很好地分佈。作爲一個例子來看看這個截圖（來自MindNode）：如何繪製思維導圖

what it should look like

如何很好地安排這種結構的任何想法，因爲每個節點佔據的空間？你知道任何可以查看的代碼嗎（graphviz有點簡單）？

在它出現之前，我不在尋找「物理仿真」算法，如this或完成的程序，如點。最後我想在JS中實現它，但爲了理解算法，任何語言都是好的。

我想你可以只用CSS做到這一點。用JS給你正確的類給你的節點，CSS會根據需要來安排它們。

例如，你可以在每個節點上設置margin: 1em 0 1em 0，以便它有足夠的空間，等等等等

2012-04-27 22:49:27

是CSS現在夠聰明，得出合適的花鍵如下圖？ – 2012-04-27 22:55:05

你可以用'border-radius'來玩這個，是的。但使用'帆布'會更好，我猜。需要注意的是CSS不會爲你做任何魔術，每次添加節點時都需要計算。 – 2012-04-27 22:57:35

嗯。在我的瀏覽器（Firefox）中，非圓形邊框半徑非常難看，甚至忽略了這一點，我認爲您不能僅使用省略號來生成上面的曲線。但也許這些曲線並不是提問者真正關心的：只提及定位。 – 2012-04-27 23:07:06

回答