MouseClick node event on d3 graph

Question

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?

make a fiddle, then We could do something...... – saikiran.vsk Feb 09 '15 at 11:02 — saikiran.vsk, Feb 09 '15 at 11:02

score 0 · Accepted Answer · answered Apr 07 '15 at 14:31

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.

This run very well, thaks @pierpytom for your answer – Natália Oliveira Apr 08 '15 at 15:04 — Natália Oliveira, Apr 08 '15 at 15:04

MouseClick node event on d3 graph

1 Answers1