title: Hierarchial Edge Bundling: adding parent group label
body: <p>I'm quite new to HTML and JavaScript. I'm facing the famous Hierarchical Edge Bundling available <a href="https://bl.ocks.org/mbostock/7607999" rel="noreferrer">here</a>, which is generated by the D3.js library.</p>
  
  <p>My goal is to add a semi-circular label zone in order to obtain something like this: every final node group is labelled with the parent's name.
  <a href="https://i.stack.imgur.com/nGnb2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nGnb2.png" alt="enter image description here"></a></p>
  
  <p>Unfortunately, I have not found any code where I could take inspiration yet, except the code available in the link above: my idea would be to modify that code adding some line in order to generate the labels.</p>
  
  <p>I saw this <a href="https://bl.ocks.org/mbostock/4339607" rel="noreferrer">link</a> with a snippet of code that may do to the trick, but I don't know how to use it (and whether I am in the right direction or not)</p>
  
  <pre><code>node.append("text")
    .attr("dy", ".31em")
    .attr("x", function(d) { return d.x &lt; 180 === !d.children ? 6 : -6; })
    .style("text-anchor", function(d) { return d.x &lt; 180 === !d.children ? "start" : "end"; })
    .attr("transform", function(d) { return "rotate(" + (d.x &lt; 180 ? d.x - 90 : d.x + 90) + ")"; })
    .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
  </code></pre>
  
  <p>Does someone have any suggestion?</p>