visualizerを追加

[chaemon]

グラフにビジュアライザーを追加しました。使い方はグラフgに対してg.visualize()をやるとgraph.htmlという名前のファイルができてそれをブラウザで開くとグラフが見れます。

TODO: グラフのノードや辺の配置をもう少し工夫する。

[haruyama480]

頂いたサンプル

import atcoder/extra/graph/graph_template
import atcoder/extra/graph/visualizer

const N = 10
var g = initGraph(N)

for i in 0 ..< N:
  for j in 0 ..< N:
    g.addEdge(i, j, i * j)

g.visualize()

のコンパイルに失敗すると思ったらimport std/strutilsが抜けてそうです

[haruyama480]

graph.html見ると、スクショじゃわかりにくいのですが、あるfpsで再描画されハエが飛び回っているようなアニメーションになってしまいます..

[haruyama480]

avoidOverlapが大きいと、最適な表示が振動してしまいハエが飛んでるように見えてしまうようでした！0.1だと静止しました。

この係数はエッジの密度に依存しそうで無難な値に仮ぎめしておくのが良さそうです。0l5は、10node, 100edgeで振動するようなので0.1-0.3ぐらいにしておきましょうか？

[haruyama480]

    import std/browsers
    openDefaultBrowser("./graph.html")

でブラウザで開けそう

[chaemon]

avoidOverlapが大きいと、最適な表示が振動してしまいハエが飛んでるように見えてしまうようでした！0.1だと静止しました。

この係数はエッジの密度に依存しそうで無難な値に仮ぎめしておくのが良さそうです。0l5は、10node, 100edgeで振動するようなので0.1-0.3ぐらいにしておきましょうか？

そうなんです。。。avoidOverlapが大きすぎるといつまでも動き続けちゃうので、1秒くらいで止めるとかできないんですかね〜それとavoidOverlap大きくしてもあんまり綺麗に表示されてる感がしませんね。。。

スクロールバーをつけてavoidOverlapをユーザーが動かせるようにもできると思います（サンプルに似たようなのがありました）

[chaemon]

    import std/browsers
    openDefaultBrowser("./graph.html")

でブラウザで開けそう

atcoder-toolsとかでいくつかのテストケースを順番に実行して全部ビジュアライザを開くみたいなのもやってみたいんですけどねーテストケース番号を引数に渡せるといいんですが、それはatcoder-toolsの改変が必要そうです

[chaemon]

こちらのサンプルのようにノードを動かしても他のノードは動かないような設定にしたいですね。

https://visjs.github.io/vis-network/examples/network/edgeStyles/smoothWorldCup.html

[haruyama480]

1秒くらいで止めるとかできないんですかね〜

physics: {enabled: false}か vis-networkに焼きなましの実装を加えるか ですかね

[chaemon]

1秒くらいで止めるとかできないんですかね〜

physics: {enabled: false}か vis-networkに焼きなましの実装を加えるか ですかね

おぉ！そんなことができるんですねー

[chaemon]

strutilsとかopenBrowserとか入れました。

enabled falseにするとどうなるんでしたっけ？

[haruyama480]

すみません、焼きなましは半分冗談ですw 知識があればvis-networkにissueあげて実装すると良さそうです

[haruyama480]

enabled falseは物理エンジンが効かなくなるので慣性がなくなります https://visjs.github.io/vis-network/docs/network/physics.html

[haruyama480]

こちらのサンプルのようにノードを動かしても他のノードは動かないような設定にしたいですね。

あと、これが実現できます

[chaemon]

そうなんですね！それは知らなかった！

初期配置でできるだけ見やすくしてくれるようにはしたいですね。

[chaemon]

こんな風になりました。線のスタイルとかも確か選べてしかも変更ボタンを設置することもできるはずです。

[haruyama480]

smoothをfalseにすると直線になりますかね？ https://visjs.github.io/vis-network/docs/network/edges.html

エッジに数値与えると、色が変わるのもいいですね。サンプルは以下の設定にしており、edgesの数値が色になってそうです？逆に数値のラベルと色のラベルは分けることができるか怪しいかも?

          edges: {
            color: { inherit: true },

[chaemon]

初期配置が小さな領域に込み入って配置されちゃうんですが、これをキャンバスいっぱいに配置してくれる機能はありますかね？

[haruyama480]

var options = {
  autoResize: true,
  height: '100%',
  width: '100%'

試すと良さそうです? https://visjs.github.io/vis-network/docs/network/

[chaemon]

あ、visualizerをマージしたつもりが、floatのepsを修正という別のコミットが入ってしまいました。