d3.js tree structure text links

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?

Accepted Answer

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.

d3.js tree structure text links

Solution

Problem