2012-04-27 10 views
7

私はマインドマップを描くためのアルゴリズムに取り組んでいます。主なポイントは、ノードをインテリジェントに配置することであり、重複がなく、うまく分散しているように見えます。例として(MindNodeから)このスクリーンショットを参照してください。マインドマップを描く方法

what it should look like

うまくこの構造体を配置する方法上の任意のアイデアを、各ノードが占有するスペース与えられましたか?私が調べることができるコードを知っていますか(少し単純なgraphviz)?

これまでに、私はthisのような「物理シミュレーション」アルゴリズム、またはドットのような完成したプログラムを探していません。最後にJSで実装したいと思っていますが、アルゴリズムを理解するためにはどんな言語でも問題ありません。

答えて

1

私はCSSでこれを行うことができると思います。あなたのノードにJSで適切なクラスを与えると、CSSは必要に応じてそれらを整理します。

それは十分なスペースを持っているように、たとえば、あなたがなどなど、各ノードでmargin: 1em 0 1em 0を設定することができ

+0

は今の図のように、適当なスプラインを描画するのに十分なスマートCSSですか? –

+1

あなたはこれに対して 'border-radius'で遊ぶことができます。しかし、 'キャンバス'を使うことは、私が推測する方が良いでしょう。注意点は、CSSはあなたのために魔法を実行しないので、ノードを追加するたびに計算する必要があるということです。 –

+0

Hmm。非円形のボーダー半径は私のブラウザ(Firefox)ではかなり醜いものですが、無視しても楕円だけを使って上の曲線を描くことはできません。しかし、おそらくカーブは質問者が本当に気にしていることではなく、ポジショニングだけが言及されています。 –