Defining nodes in vis.js, .html , looks like this:

var nodes = [
{id: 1, label: 'Node1'},
{id: 2, label: 'Node2'},
{id: 3, label: 'Node3'},
{id: 4, label: 'Node4'}
];

What I'm trying to find out is, can you create a node double-click (or other event/click type) action, something like so:

var nodes = [
{id: 1, label: 'Node1', double-click: 'Arbitrary_OnClick_Function()'},
{id: 2, label: 'Node2', double-click: 'document.getElementById("div1").innerHTML="Node 2 was clicked"'},
{id: 3, label: 'Node3', double-click: ';target="_blank"'},
{id: 4, label: 'Node4', double-click: '#SomePageSection'}
];

Perhaps there's a way to do this bining with angular.js (github/edgaraafelix/angular-visgraph) or non-simply through vis.js method on(event,callback) (http//visjs/docs/network.html#Methods and .html#Events).

Defining nodes in vis.js, http://visjs/network_examples.html , looks like this:

var nodes = [
{id: 1, label: 'Node1'},
{id: 2, label: 'Node2'},
{id: 3, label: 'Node3'},
{id: 4, label: 'Node4'}
];

What I'm trying to find out is, can you create a node double-click (or other event/click type) action, something like so:

var nodes = [
{id: 1, label: 'Node1', double-click: 'Arbitrary_OnClick_Function()'},
{id: 2, label: 'Node2', double-click: 'document.getElementById("div1").innerHTML="Node 2 was clicked"'},
{id: 3, label: 'Node3', double-click: 'https://www.google.;target="_blank"'},
{id: 4, label: 'Node4', double-click: '#SomePageSection'}
];

Perhaps there's a way to do this bining with angular.js (github./edgaraafelix/angular-visgraph) or non-simply through vis.js method on(event,callback) (http//visjs/docs/network.html#Methods and http://visjs/docs/network.html#Events).

• javascript
• angularjs
• onclicklistener
• vis.js

Share Improve this question Follow edited Dec 15, 2015 at 21:01 rene 42.5k7878 gold badges121121 silver badges165165 bronze badges asked Jan 21, 2015 at 0:38 user3645994user3645994 41966 silver badges1414 bronze badges 1

• Can you maybe accept the answer to mark the question as resolved? This will help other users as well. – MERose Commented Apr 18, 2016 at 11:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

So from that same doc that you have the nodes example from, you eventually create a network e.g.

var network = new vis.Network(container, data, options);

(the data object contains the nodes and edges)

then you can put an event listener on the network, and you know which node you clicked on from the properties like this

network.on( 'click', function(properties) {
    alert('clicked node ' + properties.nodes);
});

I had exactly the same need. Starting with Simon's answer I ended up with adding the following code:

network.on("doubleClick", function (params) {
    params.event = "[original event]";
    window.open("/myurl/?id="params.nodes[0],'_blank');
});

params.nodes[0] is the id of the node I'm using in url.

More examples available in source of this visjs page (updated link as per PLG's ment).

Issues: I this works on any network object you double click. I don't know how to make it work on nodes only...

myNetwork.on('doubleClick', function(obj) {
  // my crazy code
});

If you listen to the “doubleClick” event, you get an object. I quote from the documentation:

obj = {
 nodes: [Array of selected nodeIds],
 edges: [Array of selected edgeIds],
 event: [Object] original click event,
 pointer: {
  DOM: {x:pointer_x, y:pointer_y},
  canvas: {x:canvas_x, y:canvas_y}
 }
}

In the object you get the coordinates of the click in the canvas. You can use this to query the NodeId and get the respective node.

const nodeId = myNetwork.getNodeAt(obj.pointer.canvas.x, obj.pointer.canvas.y); // e.g. 12

Take the id and get the node object

const nodeObj = myNetwork.nodes.get(nodeId)

Now you have access to the object and can do whatever you want with the properties within