ネットワークグラフを描画するプラグイン 📖

vis-networkを使って、なでしこさんでネットワーク図を書くNAKO3プラグイン。オプションをもっとラクに設定したりしたいけど、とりあえず。/システム変数の参照をv3.6系の仕様変更に準じ修正。/ライブラリの取り込みをjsプラグインに変更。

プログラム: (→大)
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* ＃ ネットワークグラフ描画　vis-network.nako3 v 0.1.1 vis-networkを使って、なでしこ３でネットワーク図を書くやつ ※　取り込み文 ！『https://n3s.nadesi.com/plain/vis_network.nako3』を取り込む。 　作者:雪乃☆雫　／　ライセンス:CC0　／　制作時のナデシコバージョン: 3.4.4 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/ ＃vis-networkの取り込み !「https://n3s.nadesi.com/plain/LoadScript.js」を取り込む。 「https://unpkg.com/vis-network/standalone/umd/vis-network.min.js」のライブラリ読み込み。 ＃変数 変数 visネットワークオプション＝空辞書。 変数 visネットワークデータ＝空辞書。 変数 visネットワークノード＝空辞書。 変数 visネットワークエッジ＝空辞書。 ＃ネットワーク描画 ●(ノードとエッジの|ノードをエッジで)visネットワーク描画 # データセット visネットワークノード＝ノード。 visネットワークエッジ＝エッジ。 ノード＝『new vis.DataSet(sys.__findVar("visネットワークノード"))』をJS実行。 エッジ＝『new vis.DataSet(sys.__findVar("visネットワークエッジ"))』をJS実行。 visネットワークデータ＝{ nodes: ノード, edges: エッジ, } # ネットワークの作成 『new vis.Network(sys.__getSysVar("DOM親要素"),sys.__findVar("visネットワークデータ"),sys.__findVar("visネットワークオプション"))』をJS実行。 ここまで。 ※なでしこのシステム変数はsys.__getSysVar("変数名") で取得出来る。 ※なでしこで作成した変数は、sys.__findVar("変数名")で参照出来る。 #----------------------------------------------------------- もし、プラグイン名＝「メイン」ならば、 # DOM親要素に作成されます。 DOM親要素の「幅」に「300px」をDOMスタイル設定。 DOM親要素の「高さ」に「200px」をDOMスタイル設定。 # 表示するためのノードとエッジを設定 visネットワークノード＝[ { id: 1, label: "Ａ" }, { id: 2, label: "Ｂ" }, { id: 3, label: "Ｃ" } ] visネットワークエッジ＝[ {from: 1, to: 2}, {from: 1, to: 3} ] # 必要があれば、visネットワークオプションを編集。 visネットワークオプション＝{ //physics:FALSE, //ぷよんぷよんと動くのを止める //clickToUse : TRUE, //マウスで動かすのを止める edges:{ //エッジを黒の矢印にする color : 黒色 , arrows: 'to', } } # ネットワーク描画（描画先はDOM親要素） visネットワークノードとvisネットワークエッジでvisネットワーク描画。 ここまで。