Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Example based on https://visjs.github.io/vis-network/examples/.

Template: 

<div class="container">

    <style>
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>

    <p>
        Create a simple network with some nodes and edges.
    </p>

    <div id="mynetwork"></div>

</div>

Script:

SR.render({}, () => {
    const {
        vis
    } = SR.lib;

    // create an array with nodes
    var nodes = new vis.DataSet([{
            id: 1,
            label: "Node 1"
        },
        {
            id: 2,
            label: "Node 2"
        },
        {
            id: 3,
            label: "Node 3"
        },
        {
            id: 4,
            label: "Node 4"
        },
        {
            id: 5,
            label: "Node 5"
        }
    ]);

    // create an array with edges
    var edges = new vis.DataSet([{
            from: 1,
            to: 3
        },
        {
            from: 1,
            to: 2
        },
        {
            from: 2,
            to: 4
        },
        {
            from: 2,
            to: 5
        },
        {
            from: 3,
            to: 3
        }
    ]);

    // create a network
    var container = document.getElementById("mynetwork");
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};
    var network = new vis.Network(container, data, options);
});

  • No labels