...
Info |
---|
Visjs, versions: vis-data → |
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); }); |