Add onclick event to nodes in Sigma.js

Question

I have a very simple example in sigma.js that reads a gexf-file with some additional data. ``` // Instanciate sigma.js and customize rendering : var sigInst = sigma.init(document.getElementById('graph-container')).drawingProperties({ defaultLabelColor: '#fff', defaultLabelSize: 14, defaultLabelBGColor: '#fff', defaultLabelHoverColor: '#000', labelThreshold: 6, defaultEdgeType: 'straight' }).graphProperties({ minNodeSize: 0.5, maxNodeSize: 5, minEdgeSize: 1, maxEdgeSize: 1 }).mouseProperties({ maxRatio: 4 }); // Parse a GEXF encoded file to fill the graph // (requires "sigma.parseGexf.js" to be included) sigInst.parseGexf(gexfFile); ``` This is actually just taken from a tutorial. Now I'd like to add an on-click event to all nodes. Can anyone tell me a proper way to do this?

Accepted Answer

Step1 - Writing the event handler

```
function onClick(event) {
    window.console.log("clicked!");
} 
```

Step 2 - Finding the event name

I've been wondering for a while what the event name could be. It appears the "onmouseover", "onmousedown", etc have been renamed with the "onmouse" part truncated and "nodes" appended at the end.

So for a click event it will be 'downnodes'

Step 3 - Linking the handler to the click event:

You have to use the bind() function to bind an event handler to an event name.

```
sigInst.bind('downnodes',onClick).draw();
```

Events list @ v1.0.3

Thanks to Matt for providing the list.

click, rightClick, clickStage, doubleClickStage, rightClickStage, clickNode, clickNodes, doubleClickNode, doubleClickNodes, rightClickNode, rightClickNodes, overNode, overNodes, outNode, outNodes, downNode, downNodes, upNode, upNodes - all should be lowercase.

Add onclick event to nodes in Sigma.js

Solution

Problem