作品 ID: 1963

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

公開

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

作品について

作品情報

作品を編集

雪乃☆雫作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: プラグイン
利用バージョン: 3.6.26
アクセス数(累計): 117
アクセス数(今月): 55
更新日時: 2023/01/16 08:15 編集: 2024/11/13 14:32

⭐

作品公開情報

交流

コメントを取得中...