Saturday, 11 June 2022

Hierarchial Edge Bundling: adding parent group label

I'm quite new to HTML and JavaScript. I'm facing the famous Hierarchical Edge Bundling available here, which is generated by the D3.js library.

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. enter image description here

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.

I saw this link 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)

node.append("text")
  .attr("dy", ".31em")
  .attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
  .style("text-anchor", function(d) { return d.x < 180 === !d.children ? "start" : "end"; })
  .attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; })
  .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });

Does someone have any suggestion?



from Hierarchial Edge Bundling: adding parent group label

No comments:

Post a Comment