Arbor Js - Node Onclick?

Question

I\'m using arbor.js to create a graph.

How do I create an onclick event for a node, or make a node link somewhere upon being clicked?

The Arborjs.or

Answer 1

If you look at the atlas demo code (in github) you will see towards the bottom there are a selection of mouse event functions, if you look at:

$(canvas).mousedown(function(e){
            var pos = $(this).offset();
            var p = {x:e.pageX-pos.left, y:e.pageY-pos.top}
            selected = nearest = dragged = particleSystem.nearest(p);

            if (selected.node !== null){
            // dragged.node.tempMass = 10000
                dragged.node.fixed = true;
            }
            return false;
        });

This is being used to control the default node "dragging" functionality. In here you can trigger the link you want.

I would add the link URL to the node json that you are passing back to define each node, so your original JSON posted becomes something like:

nodes:{
threadstarter:{'color':'red','shape':'dot','label':'Animals'},
reply1:{'color':'green','shape':'dot','label':'dog', link:'http://stackoverflow.com'},
reply2:{'color':'blue','shape':'dot','label':'cat', link:'http://stackoverflow.com'}
},

Then, you can update the mouseDown method to trigger the link (the current node in the mouse down method is "selected" so you can pull out the link like selected.node.data.link

If you look at the original source for the arbor site to see how they have done it, they have a clicked function that is called on mouseDown event and then essentially does:

 $(that).trigger({type:"navigate", path:selected.node.data.link})

(edited for your purposes)

It is worth noting that whilst the Arbor framework and demos are open for use, their site isnt and is actually copyrighted, so only read that to see how they have done it, dont copy it ;)