# Arranging rectangles in a circle with equal distance

25
December 02, 2020, at 8:40 PM

I'm writing a program that renders mind maps. So far, I've succeeded in drawing the root node and the first level of child nodes around it, in a circle.

This is the code that renders the mind map nodes:

``````const root = data.find((node) => node.parent === undefined);
const level1 = data.filter((node) => node.parent === root.id);
root.x = 0;
root.y = 0;
root.level = 0;
const slice = (2 * Math.PI) / level1.length;
for (let i = 0; i < level1.length; i++) {
const level1node = level1[i];
level1node.level = 1;
const angle = slice * i;
const x = root.x + radius * Math.cos(angle);
const y = root.y + radius * Math.sin(angle);
level1node.x = x;
level1node.y = y;
}
``````

You can find the whole program on CodeSandbox.

The output looks like this (with different number of child nodes, from 1 child to 9 children):

As you can see, depending on the number of child nodes, the distribution of the child nodes around the root node in the center looks more or less uneven and not pleasing to the eye, especially with 3, 7 or 9 child nodes.

This is because of the rectangular format of the child node boxes. The center points of the boxes have the exact same distance between them, but the length of the distance (shown as red line segments below) is different, depending on position:

I have to find a way to make it so that the red circle sections are equal in size.

So my question is:

How can I calculate the angle at which to render each purple box so that the distance between each box looks to be the same (i.e. take into account the width and height of each box)?

Okay, here's my attempt (with diagrams too!)

POPULAR ONLINE

### How to filter integer value based on string parameter input on list on kotlin?

I am trying to filter an object type list based on a string value which is working fine, but now I need to filter based on an integer attribute of the objects on the list

49

### execute php Shortcode on button click

I am trying to execute a php shortcode on button click but that is not running

38

### Python uncatchable IOError [Errno 32] Broken pipe from Popen within Pool

I have a Python 27 code which is running two piped suprocess Popens with multiprocessing Pool as follows

58

### Best way to store user notification prefrences in database

I want to store user notification preferencesI do it like this:

54