vis-network
Version:
A dynamic, browser-based visualization library.
113 lines (101 loc) • 2.4 kB
HTML
<html>
<head>
<title>Vis Network | Edge Styles | Arrow Alignment</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.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 types = [].concat.apply(
[],
[
"curvedCW",
"diagonalCross",
"continuous",
"cubicBezier",
"discrete",
"dynamic",
"horizontal",
"straightCross",
"vertical",
"curvedCCW"
].map(type => [{ type, scaleFactor: 1 }, { type, scaleFactor: -1 }])
);
// create an array with nodes
var nodes = new vis.DataSet();
// create an array with edges
var edges = new vis.DataSet();
types.forEach(({ type, scaleFactor }, i) => {
nodes.add([
{
id: 10 * i + 1,
label: type,
x: 0,
y: i * 50
},
{
id: 10 * i + 2,
label: type,
x: 800,
y: i * 50
}
]);
edges.add([
{
from: 10 * i + 1,
to: 10 * i + 2,
smooth: { type },
arrows: {
from: { enabled: true, scaleFactor },
middle: { enabled: true, scaleFactor },
to: { enabled: true, scaleFactor }
}
}
]);
});
// create a network
var container = document.getElementById("mynetwork");
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: {
enabled: false
}
};
// initialize your network!
var network = new vis.Network(container, data, options);
</script>
</body>
</html>