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.org homepage has nodes which link to external pages upon being clicked, how do I replicate this, or make the node call javascript function upon being clicked?

My current node and edges listing is in this format:

var data = {
    nodes:{
        threadstarter:{'color':'red','shape':'dot','label':'Animals'},
        reply1:{'color':'green','shape':'dot','label':'dog'},
        reply2:{'color':'blue','shape':'dot','label':'cat'}
    },
    edges:{
        threadstarter:{ reply1:{}, reply2:{} }
    }
};
sys.graft(data);

A bit of context:
I’m using arbor.js to create a graph of thread starters and replies on my forum.
I’ve got it working so that id’s are displayed ‘in orbit’ around their respective thread starter.

The reference on the arbor site is really not very helpful.
Any help is much appreciated.

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 😉