Question

In this example, how can I make the text of each node to be a clickable link?

I tried something similar to this code, but the values were not clickable:

var links = text.append("a").attr("xlink:href", "http://www.google.com/");

// A copy of the text with a thick white stroke for legibility.
links.append("svg:text")
    .attr("x", 8)
    .attr("y", ".31em")
    .attr("class", "shadow")
    .text(function(d) { return d.name; });

 links.append("svg:text")
    .attr("x", 8)
    .attr("y", ".31em")
    .text(function(d) { return d.name; });

EDIT / SOLUTION: turns out the css had this attriubte: pointer-events: none;
I had to delete it and then use as Elijah suggested.

Answer 1

Don’t use links, drop it and append directly to your text <g> and it should work.

text.append("svg:text")
        .attr("x", 8)
        .attr("y", ".31em")
        .attr("class", "shadow")
        .text(function(d) { return d.name; })
        .on("click", function() {yourFunction(yourVar)})
        .on("mouseover", function() {yourFunction2(yourVar)})
        .on("mouseout", function() {yourFunction3(yourVar)})
;

Also, if you want to pass the bound data, you’d do that like this:

.on("click", function(d) {yourFunction(d.yourVar)}

Whereas if you want to pass the actual d object, you can do it like this:

.on("click", yourFunction}

In which case yourFunction(d,i) can then reference d.whatever from your bound data.