vis-network
Version:
A dynamic, browser-based visualization library.
120 lines (112 loc) • 3 kB
HTML
<html>
<head>
<title>Vis Network | Node Styles | Overriding Group Styles</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background: #3d3d3d;
}
.mycontainer {
position: relative;
width: 100%;
height: 100%;
}
#mynetwork {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
</style>
<script type="text/javascript" src="../../../dist/vis-network.js"></script>
<link
href="../../../dist/vis-network.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<div class=".mycontainer">
<div id="mynetwork" />
</div>
<script type="text/javascript">
var color = "gray";
var len = undefined;
var nodes = [
{ id: 1, label: "Node: 1\nGroup: 1", group: 1 },
{ id: 2, label: "Node: 2\nGroup: 1", group: 1 },
{ id: 3, label: "Node: 3\nGroup: 1", group: 1 },
{ id: 4, label: "Node: 4\nGroup: 1", group: 1 },
{ id: 5, label: "Node: 5\nGroup: 2", group: 2 },
{
id: 6,
label: "Node: 6\nGroup: 2\nCustom background",
group: 2,
color: { background: "#003d3d" }
},
{
id: 7,
label: "Node: 7\nGroup: 2\nCustom border",
group: 2,
color: { border: "#00d3d3" }
},
{ id: 8, label: "Node: 8\nGroup: 2", group: 2 },
{ id: 9, label: "Node: 9\nGroup: 3", group: 3 },
{ id: 10, label: "Node: 10\nGroup: 3", group: 3 },
{ id: 11, label: "Node: 11\nGroup: 3", group: 3 },
{ id: 12, label: "Node: 12\nGroup: 3", group: 3 }
].map((node, index, arr) => {
const angle = 2 * Math.PI * (index / arr.length + 0.75);
node.x = 400 * Math.cos(angle);
node.y = 400 * Math.sin(angle);
if (index % 2 === 0) {
node.value = index + 1;
}
return node;
});
var edges = [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 },
{ from: 4, to: 5 },
{ from: 5, to: 6 },
{ from: 6, to: 7 },
{ from: 7, to: 8 },
{ from: 8, to: 9 },
{ from: 9, to: 10 },
{ from: 10, to: 11 },
{ from: 11, to: 12 },
{ from: 12, to: 1 }
];
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: false,
nodes: {
shape: "dot",
size: 30,
font: {
size: 32,
color: "#ffffff"
},
borderWidth: 2
},
edges: {
width: 2,
arrows: "to"
}
};
network = new vis.Network(container, data, options);
</script>
</body>
</html>