Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Info

Visjs, versions:

vis-data → 6.6.1
vis-graph3d → 5.9.8
vis-network → 7.10.2
vis-timeline → 7.3.7
vis-util → 4.3.4

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

Template: 

Code Block
<div class="container">
     <style>
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
     <p>
        Create <p>Create a simple network with some nodes and edges.
    </p>

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

</div>

Script:

Code Block
SR.render({}, async () => {
    const {
 await eval(await fetch('https://cdnjs.cloudflare.com/ajax/libs/vis-data/6.6.1/dist/umd.js').then((res) => res.text()));
    await eval(await vis
    } = SR.lib;
fetch('https://cdnjs.cloudflare.com/ajax/libs/vis-network/8.5.4/standalone/umd/vis-network.min.js').then((res) => res.text()));
    // 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);
});