score:7

Accepted answer

The problem in your setup mostly stems from the fact that you have pointer-events: none for certain elements, such as the leaves (smallest circles).

If you correct that and define the click event such that it directs to the url instead of triggering a zoom event for the leaves, you get the desired behavior.

I put together a small fiddle for you, see here: http://jsfiddle.net/chroth/fkxcvtu9/3/

The core of the idea is in here (click function):

function clickFct(d,i) {
if (d3.select(this).classed("node--leaf")) {
    alert(d.url); //open URL here
} else {
    if (focus !== d) 
    {
        zoom(d); 
        d3.event.stopPropagation();
    }
}
}

and in this change in the style:

 .node--root,
 .node--leaf {
   pointer-events: all;
 }

TODOs

As you can see, currently I am just shooting an alert. Also, you might want to disable certain click events when not zoomed in etc. Plus work on the colors.

Also, note that you need to fix the visibility of the labels etc.

But I leave that to you :)

Hope that helps.

score:1

Thanks Pinguin. It is working correctly for me, but I am not sure about the purpose for the i parameter in your function. Here is a small modification that protects against urls that are undefined.

function onClickLeaf(d) 
{
    if (d3.select(this).classed("node--leaf")) 
    {
        if(d.url !== undefined)
        {
            alert(d.url); //open URL here
        }
    } 
    else 
    {
        if (focus !== d) 
        {
            zoom(d); 
            d3.event.stopPropagation();
        }
    }
}

Up vote from me due to this particular line of code, and being nice enough to wrap it into a function for simplicity.

if (d3.select(this).classed("node--leaf")) 

Related Query