Hyperlinks in D3.js objects, part 2

Question

I'm very new to D3 but I've put together a Reingold-Tilford tree based on this example: http://bl.ocks.org/mbostock/4339184

I'm trying to add hyperlinks to the each child node that concludes one of the chains - basically, any node that has a whitish circle in front of it.

I found this helpful explanation of how to add hyperlinks - Hyperlinks in d3.js objects - but unfortunately I only understand half of it.

The author writes:

It is quite easy, just add some more "key" : "value" pairs. Example:

        "children": [
        {
            "name": "Google",
            "size": 3938,
            "url":  "https://www.google.com"

        },
        {
            "name": "Bing",
            "size": 3938,
            "url":  "http://www.bing.com"

        }
    ]

I agree, this is easy - I've done this. But after I've done it, how do I change the code of the page to, as the helper in that other post wrote, "in the d3 drawing code where you append nodes for each data element you wrap the element you want to be clickable links with an svg:a tag:"

nodeEnter.append("svg:a")
.attr("xlink:href", function(d){return d.url;})  // <-- reading the new "url" property .append("svg:rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.on("click", click);  // <- remove this if you like

This is what I don't understand. Can someone please explain how I need to modify this to align with the text in this example - http://bl.ocks.org/mbostock/4339184

Thank you, in advance.

Matt

Answer 1

First you would need to check if the node you're appending has children, so you can then differentiate which are going to be links and which will be text. After you have done that you can then append the right element. So instead of adding only text elements like you're doing now:

node.append("text")
    .attr("dx", function(d) { return d.children ? -8 : 8; })
    .attr("dy", 3)
    .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
    .text(function(d) { return d.name; });

Loop over them, determine who has children and append the right element accordingly like this:

node.each(function(d){
    var thisNode = d3.select(this);
    if (!d.children) {
        thisNode.append("a")
            .attr("xlink:href", function(d) { return d.url; })
            .append("text")
                .attr("dx", 8)
                .attr("dy", 3)
                .attr("text-anchor", "start")
                .text(function(d) { return d.name; });
    } else {
        thisNode.append("text")
            .attr("dx", -8)
            .attr("dy", 3)
            .attr("text-anchor", "end")
            .text(function(d) { return d.name; });      
    }
});

Now only nodes who don't have children will be hyperlinked. FYI: As you can see i've left out some redundant functions which only checked for children, since you by then already know if the node has any you won't be needing those anymore.