Skip to content

Instantly share code, notes, and snippets.

@hamzamoudnib

hamzamoudnib/index.html

Created March 7, 2021 20:04
Show Gist options
  • Save hamzamoudnib/14bb32e4836733659ba35696f3677d4f to your computer and use it in GitHub Desktop.
Save hamzamoudnib/14bb32e4836733659ba35696f3677d4f to your computer and use it in GitHub Desktop.
Download ZIP
Vis Network | Events | Interaction events
Raw
index.html
<p>
Create a simple network with some nodes and edges. Some of the events are
logged in the console in improve readability.
</p>
<div id="mynetwork"></div>
<h2 id="eventSpanHeading"></h2>
<pre id="eventSpanContent"></pre>
Raw
script.js
// create an array with nodes
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1", title: "I have a popup!" },
{ id: 2, label: "Node 2", title: "I have a popup!" },
{ id: 3, label: "Node 3", title: "I have a popup!" },
{ id: 4, label: "Node 4", title: "I have a popup!" },
{ id: 5, label: "Node 5", title: "I have a popup!" },
]);
// 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 },
]);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges,
};
var options = {
interaction: { hover: true },
manipulation: {
enabled: true,
},
};
var network = new vis.Network(container, data, options);
network.on("click", function (params) {
params.event = "[original event]";
document.getElementById("eventSpanHeading").innerText = "Click event:";
document.getElementById("eventSpanContent").innerText = JSON.stringify(
params,
null,
4
);
console.log(
"click event, getNodeAt returns: " + this.getNodeAt(params.pointer.DOM)
);
});
network.on("doubleClick", function (params) {
params.event = "[original event]";
document.getElementById("eventSpanHeading").innerText = "doubleClick event:";
document.getElementById("eventSpanContent").innerText = JSON.stringify(
params,
null,
4
);
});
network.on("oncontext", function (params) {
params.event = "[original event]";
document.getElementById("eventSpanHeading").innerText =
"oncontext (right click) event:";
document.getElementById("eventSpanContent").innerText = JSON.stringify(
params,
null,
4
);
});
network.on("dragStart", function (params) {
// There's no point in displaying this event on screen, it gets immediately overwritten
params.event = "[original event]";
console.log("dragStart Event:", params);
console.log(
"dragStart event, getNodeAt returns: " + this.getNodeAt(params.pointer.DOM)
);
});
network.on("dragging", function (params) {
params.event = "[original event]";
document.getElementById("eventSpanHeading").innerText = "dragging event:";
document.getElementById("eventSpanContent").innerText = JSON.stringify(
params,
null,
4
);
});
network.on("dragEnd", function (params) {
params.event = "[original event]";
document.getElementById("eventSpanHeading").innerText = "dragEnd event:";
document.getElementById("eventSpanContent").innerText = JSON.stringify(
params,
null,
4
);
console.log("dragEnd Event:", params);
console.log(
"dragEnd event, getNodeAt returns: " + this.getNodeAt(params.pointer.DOM)
);
});
network.on("controlNodeDragging", function (params) {
params.event = "[original event]";
document.getElementById("eventSpanHeading").innerText =
"control node dragging event:";
document.getElementById("eventSpanContent").innerText = JSON.stringify(
params,
null,
4
);
});
network.on("controlNodeDragEnd", function (params) {
params.event = "[original event]";
document.getElementById("eventSpanHeading").innerText =
"control node drag end event:";
document.getElementById("eventSpanContent").innerText = JSON.stringify(
params,
null,
4
);
console.log("controlNodeDragEnd Event:", params);
});
network.on("zoom", function (params) {
document.getElementById("eventSpanHeading").innerText = "zoom event:";
document.getElementById("eventSpanContent").innerText = JSON.stringify(
params,
null,
4
);
});
network.on("showPopup", function (params) {
document.getElementById("eventSpanHeading").innerText = "showPopup event: ";
document.getElementById("eventSpanContent").innerText = JSON.stringify(
params,
null,
4
);
});
network.on("hidePopup", function () {
console.log("hidePopup Event");
});
network.on("select", function (params) {
console.log("select Event:", params);
});
network.on("selectNode", function (params) {
console.log("selectNode Event:", params);
});
network.on("selectEdge", function (params) {
console.log("selectEdge Event:", params);
});
network.on("deselectNode", function (params) {
console.log("deselectNode Event:", params);
});
network.on("deselectEdge", function (params) {
console.log("deselectEdge Event:", params);
});
network.on("hoverNode", function (params) {
console.log("hoverNode Event:", params);
});
network.on("hoverEdge", function (params) {
console.log("hoverEdge Event:", params);
});
network.on("blurNode", function (params) {
console.log("blurNode Event:", params);
});
network.on("blurEdge", function (params) {
console.log("blurEdge Event:", params);
});
Raw
scripts
<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
Raw
style.css
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
Raw
vis-network-events-interaction-events.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment