Add hyperlink to node text on a collapsible tree

Question

I would like to add hyperlink on the node text in the collapsible tree example.

How can I do this?

Answer 1

I'm a Javascript/svg/d3js noob, but I "solved" this by placing a hyperlinked transparent rectangle over the text, this workaround is available as a bl.ock.:

nodeEnter
  .append("a")
     .attr("xlink:href", function (d) { return "http://www.example.com/flare/" + d.id; })
  .append("rect")
      .attr("class", "clickable")
      .attr("y", -6)
      .attr("x", function (d) { return d.children || d._children ? -60 : 10; })
      .attr("width", 50) //2*4.5)
      .attr("height", 12)
      .style("fill", "lightsteelblue")
      .style("fill-opacity", .3)        // set to 1e-6 to make transparent          
      ;

I added an additional clickable style and add .on("click", click) to the circle instead of the group (g) element.

This works, but has the drawback that the size of the clickable rect does not size with the text of the label.

I'm really looking forward to a better solution, so +1 for your question!