Consistent radius of outer circles of a Force-Directed Tree

This demo shows how we can use adapters to make radius of node’s outer circle be consistent, regardless of the size of the node.

To make that happen, all we need to do is to create adapters to fix outer circle’s scale at 1 as well as add fixed number of pixels to its radius:

TypeScript

series.outerCircles.template.adapters.add("scale", function() {
  return 1;
});

series.outerCircles.template.adapters.add("radius", function(radius) {
  return radius + 5;
});

JavaScript

series.outerCircles.template.adapters.add("scale", function() {
  return 1;
});

series.outerCircles.template.adapters.add("radius", function(radius) {
  return radius + 5;
});

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Consistent width of outer circles of a Force-Directed Treeconsistent-width-of-outer-circles-of-a-force-directed-tree