Hi John,

You would like to have a URL assigned to a node so that when a user clicks on that node the URL launches? Or do you want a hyperlink in the mouse-over data tip that the user clicks?

– Tom

Hi John,

Yes you are right about the data tip.

So the best way to go here would be to expose an onclick event in the actual halo source code which isn’t that hard. It will require just a couple of things in the src/viz/halo.js file.

1. Add a new custom event to this line:
var customEvents = [“linkover”,”nodeover”,”arcover”,”linkout”,”nodeout”,”arcout”];
TO
var customEvents = [“linkover”,”nodeover”,”arcover”,”linkout”,”nodeout”,”arcout”,”nodeclick”];

2. Attach this event to a node by adding to this code here:
circle.enter().append(“circle”).attr(“class”,function (d) { return “vz-halo-node node-key_” + d.key; })
.on(“mouseover”,function (d,i) { scope.dispatch.nodeover(this,d,i) })
.on(“mouseout”,function (d,i) { scope.dispatch.nodeout(this,d,i) });
ADD
.on(“click”,function (d,i) { scope.dispatch.nodeclick(this,d,i) });

Now the halo component exposes a node click event.

In your test container you will want to probably add a url to the node data property so you can access when responding to the click event which would be like the below.

myHalo.on(“nodeclick”,function (d,i) { window.open(d.myNodeUrl); });

Let me know how that works for you.

– Tom

Hi John,

No problem.

In your halo_test.js file one of the first blocks of code you see is this:

  viz.data(data)
        .width(800).height(600)  
        .haloKey(function (d) {
            return d.CMTE_ID; })  
        .nodeKey(function (d) {
            return d.CAND_ID; })  
        .nodeGroupKey(function (d) {
            return d.PTY; }) 
        .value(function (d) {
            return Number(d.TRANSACTION_AMT); }) 
        .on("update", onUpdate) 
        .on("nodeover",node_onMouseOver)
        .on("nodeout",onMouseOut) 
        .on("arcover",arc_onMouseOver)
        .on("arcout",onMouseOut)
        .on("linkout",onMouseOut);   

Just add this to the end

.on("nodeclick",function (d,i) {

  // Get the url you want to open - perhaps from the data element you populate it with?

var myUrl = d.myCustomURL

OR

var myUrl = "http://someotherurl.com";

window.open(myUrl);

})            

Now the halo in the test file will be able to respond to that click event.

– Tom

Hi John,

To help make this a little easier I went ahead and implemented the customizations you are looking for in a custom set of source code files – as that is probably the easiest way to show you versus the support forum.

If you want to send me your email via the contact form on the Vizuly.io site I can send you the modified source code files that have a custom node_click event that opens a new browser window.

For future reference the immediate problem you are having is the way your HaloTest.html file is referencing the javascript source code. It comes out of the box pointing at compiled minified source code. But you want to change it to point at the actual source code files you are modifying. The process to debug the source code files is described in the first part of our Getting Started Guide. In the files I send you, you will see how I set it up so you can modify and debug your custom code. It is pretty straight forward.

– Tom

Hi John,

I am happy we were able to make this work so easily.

I realize your request is a pretty obvious one, and as such I have just modified the core vizuly source code to support a “node click” event.

For anyone else who has already downloaded this component and would like to use this new event, you can simply log in to your account and re-download the halo code. The new node click event is now part of the stock package.

– Tom