[ 📌文法] [ 🎨命令一覧]

[編集モード] ネットワークグラフを描画するプラグイン

vis-networkを使って、なでしこさんでネットワーク図を書くNAKO3プラグイン。オプションをもっとラクに設定したりしたいけど、とりあえず。プラグイン冒頭でCDN取り込むスクリプトタグをヘッダに埋め込んで取り込み完了待ちするので、表示にちょっと時間がかかる場合があります。

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
＃ ネットワークグラフ描画　vis-network.nako3 v 0.1.0

vis-networkを使って、なでしこ３でネットワーク図を書くやつ

※　取り込み文
！『https://n3s.nadesi.com/plain/vis_network.nako3』を取り込む。

作者:雪乃☆雫　／　ライセンス:CC0　／　制作時のナデシコバージョン: 3.4.4
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/

＃変数
変数 visネットワークオプション＝空辞書。
変数 visネットワークデータ＝空辞書。
変数 visネットワークノード＝空辞書。
変数 visネットワークエッジ＝空辞書。

＃vis-networkの取り込み
変数 visネットワーク取り込み完了はオフ。
「https://unpkg.com/vis-network/standalone/umd/vis-network.min.js」をCDN取り込み。
5回:
    もし、visネットワーク取り込み完了＝はいならば、抜ける。
    1秒待つ。

●(URLの|URLを)CDN取り込み
    変数 id＝URLを「/」で区切って、それ[(それの要素数)-1]
    id=idを「.」で区切って、それ[0]の「 」を空に置換。
    もし、(idのDOM要素ID取得)＝NULLならば、
        母艦＝DOM親要素。
        「head」へDOM親要素設定。
        スクリプト＝「script」のDOM部品作成。
        スクリプトの「id」にidをDOM属性設定。
        スクリプトの「src」にURLをDOM属性設定。
        母艦へDOM親要素設定。
        スクリプトの「load」がDOMイベント発火した時には:
            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.__v0["DOM親要素"],sys.__findVar("visネットワークデータ"),sys.__findVar("visネットワークオプション"))』をJS実行。
ここまで。
※なでしこのシステム変数はsys.__v0["変数名"]で参照出来る。
※なでしこで作成した変数は、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ネットワーク描画。
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] ネットワークグラフを描画するプラグイン

素材のアップロード