I am still new at d3 and want to create a zoomable circle graph with title text, description text and links (the links only displayed in the leafs) that can be clicked and open a new page.

I have figured out how I can add those in a normal circle pack, but I can't implement it with the zoomable circle graph (not displayed)

It would be so great if someone could help me with it because I am so stuck with this.

Here my full working example at CodePen https://codepen.io/Lea12/pen/ExvoEgx

And the not working code

var description = g.selectAll("text")
                   .append("text")
                   .attr("class","description")
                   .attr("dy", +80)
                   .style("display", function(d) { 
                     return d.parent === root ? "inline" : "none";
                   })
                   .text(function(d) {
                     return d.data.description;
                   });
  
var url = g.selectAll("text")
           .append("text")
           .attr("class","description")
           .attr("dy", +120)
           .text("click for more information")
           .on("click", function(d) {
             window.open(d.data.url,"_blank")
           })