mxgraphのサンプルコード

皆さんこんにちは！底辺プログラマーのヤスです！

今回は仕事で必要なJavascriptライブラリ『mxgraph』のサンプルコードを記事にしたいと思います。

mxgraphについて日本語の解説はほとんどありません。

いちいち本家のコードを検索したり、
サンプルコードから必要なコードを抽出したりするのが面倒なので
まとめて置こうと思います。

コードはcodepenで表示します。
どなたかの参考になれば幸いです。

セル外観のサンプル

See the Pen
mxgraph_sample by Yasu_底辺プログラマー (@biz_yasu)
on CodePen.

上記はmxgraphで用意されている図形です。
自作でテンプレートを作成することもできますが、必要になったら追記します。

レイアウトのサンプル

mxgraphでは作成されたセルを自動配置するためのクラスが用意されています。

複数パターンあるのでそちらもサンプルコードを記載しておきます。

サークルレイアウト

セルを画面中心から円状に配置します。

See the Pen
circle_layout by Yasu_底辺プログラマー (@biz_yasu)
on CodePen.

コンパクトツリーレイアウト

セルをツリー表示します。

ちなみに第２引数にtrueを設定すると横方向になります。

See the Pen
compact_tree_layout by Yasu_底辺プログラマー (@biz_yasu)
on CodePen.

ファストオーガニックレイアウト

See the Pen
fast_organic_layout by Yasu_底辺プログラマー (@biz_yasu)
on CodePen.

 パーティションレイアウト

第２引数をfalseにすると縦方向に並び変わります。

See the Pen
partition_layout by Yasu_底辺プログラマー (@biz_yasu)
on CodePen.

ラディアルツリーレイアウト

See the Pen
radial_tree_layout by Yasu_底辺プログラマー (@biz_yasu)
on CodePen.

最後に

今回は記載するサンプルコードが多いので少しずつ更新していきます。

どなたかの参考になれば幸いです。