Add a hyperlink to node text on a folding tree

Question

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

How can i do this?

Answer 1

I have javascript / svg / d3js noob, but I “solved” this by placing a hypertext transparent rectangle above the text, this workaround is available as 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 extra clickable style and add .on("click", click) to the circle instead of the group element ( g ).

This works, but has the disadvantage that the size of the clickable rectangle is not the size of the label text.

I really look forward to a better solution, so +1 for your question!

Answer 2

If you remove the click handler on the global node and attach 2 different click handlers:

• One for the circle
• One for the text.

When you click on the text, you may have a different behavior. If you style this element a bit, it may look exactly like a hyperlink.

Check out my fiddle here: http://jsfiddle.net/empie/EX83X/

Click handlers

 var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }); nodeEnter.append("circle") .attr("r", 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }).on("click", click);; nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name; }) .style("fill-opacity", 1e-6) .attr("class", "hyper").on("click", clack); function clack(d) { alert(d.name); } 

And CSS:

 .hyper { color: blue; text-decoration: underline; } .hyper:hover { color: yellow; text-decoration: none; } 

Answer 3

I added another line of text to node with some link information, for example:

 nodeEnter.append("a") .attr("xlink:href", function(d) { return d.path; }) .append("text") .attr("class", "clickable") .attr("y", 16) .attr("x", function (d) { return d.children || d._children ? -10 : 10; }) .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.label; }) 

where the path and label have the data you want for each node.