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

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ネットワーク描画。
ここまで。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ