MouseClick node event on d3 graph

I need insert a mouseclick event on graph nodes, but all ways don't work with me.

My code that done the graph is this:

<!DOCTYPE html>
<html>
<head>
<title>01. Create Graph. Vivagraph SVG tutorial.</title>
<script type="text/javascript" src="VivaGraphJS-master/dist/vivagraph.js"></script>
<script type="text/javascript">
    function main () {
// 1- criar um projeto de grafo
var graph = Viva.Graph.graph();

// 2 - adicionando nós e arestas
graph.addNode('natalia', 'ledlightblue.png');
graph.addNode('jessica', 'krec_record.png');
graph.addNode('lucas', 'ledyellow.png');
graph.addNode('leo', 'ledgreen.png');
graph.addNode('hcii', 'ledpurple.png');
graph.addNode('evento', 'krec_record.png');
graph.addLink('natalia', 'hcii');
graph.addLink('jessica', 'hcii');
graph.addLink('lucas', 'hcii');
graph.addLink('leo', 'hcii');
graph.addLink('jessica', 'evento');

var graphics = Viva.Graph.View.svgGraphics(); 
//var renderer = Viva.Graph.View.renderer(graph);

graphics.node(function(node) {

    var ui = Viva.Graph.svg('image')
            .attr('width', 32)
            .attr('height', 32)
            .link('https://cdn1.iconfinder.com/data/icons/nuvola2/32x32/actions/' + node.data);

            return(ui);
});
graphics.link(function(link){
return Viva.Graph.svg('path')
              .attr('stroke', 'black')
              .attr('stroke-width',2);
 }).placeLink(function(linkUI, fromPos, toPos) {
    var data = 'M' + fromPos.x + ',' + fromPos.y +
               'L' + toPos.x + ',' + toPos.y;
    linkUI.attr("d", data);
})

var renderer = Viva.Graph.View.renderer(graph, {
    graphics : graphics
});
renderer.run();
}


</script>

<style type="text/css" media="screen">
    html, body, svg { width: 100%; height: 100%;}
</style>

I tried many ways like this that is used to do mouseover event

I'm using VivaGraph.js to do the graph

Some solution?

Solution

D3js and VivaGraphJS are two different libraries, and your question is only about VivaGraphJs (in the code D3 is not even imported), "d3.js" tag should be removed.

A possible solution is to import JQuery and change this portion of code:

graphics.node(function(node) {

    var ui = Viva.Graph.svg('image')
            .attr('width', 32)
            .attr('height', 32)
            .link('https://cdn1.iconfinder.com/data/icons/nuvola2/32x32/actions/' + node.data);

            return(ui);
});

Into:

graphics.node(function(node) {

    var ui = Viva.Graph.svg('image')
            .attr('width', 32)
            .attr('height', 32)
            .link('https://cdn1.iconfinder.com/data/icons/nuvola2/32x32/actions/' + node.data);

            $(ui).hover(function() { // mouse over
                console.log("hovering in.", node.id);
            }, function() { // mouse out
                console.log("hovering out.", node.id);
            });

            $(ui).click(function() { // mouse click
                console.log("click.", node.id);
            });

    return(ui);

});

$(ui).hover and $(ui).click come from JQuery.