Question

I am trying to add a link to the text elements of this D3 visualisation:

http://bl.ocks.org/1093025

I would like to be able to click on “flare”, “analytics” and navigate to another page or click in the rectangle and perform the normal action, which is expanding the sub-trees.

I tried a few things that didn’t work:

• on event

I tried to add an on event to the svg:text element:

nodeEnter.append("svg:text")
  .attr("dy", 3.5)
  .attr("dx", 5.5)
  .text(function(d) { return d.name; })
  .on("click",function(d,i) { alert("Clicked on the text");});

• foreignObject element

I tried to add the foreignObject element like this:

 nodeEnter.append("svg:foreignObject")
  .style("float","right")
  .attr("height", 100)
  .attr("width", 100)
  .append("div")
  .html("<a href='#'>link</a>")

Even though it creates the link, it is an extra link, though (not the text element in the rectangle).

• link with xlink:href attribute

Finally, I also tried the following (in some combinations):

<a xlink:href="/svg/index.html">
    <text x="10" y="20">/svg/index.html</text>
</a>

But it didn’t work either.

Any suggestions?

Answer 1

.on('click', function () {}) should work as long as you

• have selected the right nodes
• haven’t disabled pointer events on text elements with css

The pointer events seems to be catching people out as quite a lot of the examples have pointer-events: none for the text nodes.