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?
According to the official documentation:
s = new sigma({...});
// Bind the events:
s.bind('overNode outNode clickNode doubleClickNode rightClickNode', function(e) {
console.log(e.type, e.data.node.label, e.data.captor);
});
https://github.com/jacomyal/sigma.js/blob/master/examples/events.html
(The accepted answer did not work for me.)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With