Question

I am modifying a tree structure from one of the d3 examples with my own data set in a .json file. I have a working copy with my own data. What I want to do now is modify the text so that they link to corresponding urls. There doesn’t seem to be much documentation, that I’ve found, about how to do this.

This is the example tree that I am using: http://bl.ocks.org/1249394

Any suggestions on where to start?

Answer 1

The easiest way to do this would be to put the links in the “name” element in the JSON. You then need to create svg:a elements instead of svg:text elements for the links and svg:text elements inside them. E.g. the line

nodeEnter.append("svg:text").text(function(d) { return d.name; });

becomes

nodeEnter.append("svg:a").attr("xlink:href", function(d) { return d.name; })
.append("svg:text").text(function(d) { return d.name; });

You could of course have seperate JSON elements for link target and text. See the SVG spec for more details on linking.

Alternatively, you could use svg:foreignObject to embed HTML for the link. See here for more information.