strathausen / dracula

JavaScript layout and representation of connected graphs.
https://www.graphdracula.net
MIT License
836 stars 132 forks source link

click event modification #38

Open Grummfy opened 8 years ago

Grummfy commented 8 years ago

Hello, it could be very helpfull to have the possibility to add a click event handler for the nodes.

Thanks

strathausen commented 7 years ago

I'll post something up on how to do that.

bagnus commented 7 years ago

Hello, a quick & dirty way could be adding id and/or class to the svg object:

case test: graph.addNode('Dragonfruit', { cl:'xxxx' });

in function drawNode(), change code to:

 node.shape = this.canvas.set();
 //=========================== start mod
        var elli = this.canvas.ellipse(0, 0, 30, 20);
        elli.node.id = node.label || node.id;
        if(node.cl) {elli.node.setAttribute("class", node.cl)};
        node.shape.push(elli.attr({ stroke: color, 'stroke-width': 2, fill: color, 'fill-opacity': 0 })).push(this.canvas.text(0, 30, node.label || node.id)).translate(node.point[0], node.point[1]);
 //=========================== end mod

then in your program you can add:

$('#Dragonfruit').on("click", function(){
          alert($(this).attr('id'));
 });

or:

$('.xxxx').on("click", function(){
          alert($(this).attr('id'));
 });