使い方

ASP.NETアプリケーションにサイトからDL出来るvis.min.jsとvis.min.cssを追加します。

<link href="~/Content/vis.min.css" rel="stylesheet" />
<script src="~/Scripts/vis.min.js"></script>

こんな感じで_Layout.cshtmlのheadの中に追加しておきます。

あとは、vis.DataSetというのでデータとデータの関連を用意して、vis.Networkを作るだけです。


@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div id="networkmap" style="width: 100%; height: 500px;"></div>

<script type="text/javascript">
    var nodes = new vis.DataSet([
        { id: 1, label: "Name 1" },
        { id: 2, label: "Name 2" },
        { id: 3, label: "Name 3" },
        { id: 4, label: "Name 4" },
        { id: 5, label: "Name 5" },
        { id: 6, label: "Name 6" }
    ]);

    var edges = new vis.DataSet([
        { from: 1, to: 2 },
        { from: 1, to: 3 },
        { from: 1, to: 4 },
        { from: 4, to: 2 },
        { from: 5, to: 3 },
        { from: 6, to: 4 }
    ]);

    var data = { nodes: nodes, edges: edges };
    var options = {};

    var network = new vis.Network(document.getElementById("networkmap"), data, options);
</script>