Consistent radius of outer circles of a Force-Directed Tree

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

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:

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

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

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

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

See the Pen
Consistent width of outer circles of a Force-Directed Tree by amCharts team (@amcharts)
on CodePen.0