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;
await addMindMapNode(scene, root);
const radius = 2;
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;
await addMindMapNode(scene, level1node);
}
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!)
error: selenium.common.exceptions.TimeoutException: Message:
jetpack compose not responding to keyboard input on emulator
Hexagon Grid CSS - All hexagons change size when each of them is clicked
How to render HTML pages as PNG/JPEG images with URL array using Javascript only?
Get count of items that matches a condition from mongo db in node js
“Duplicate entry” even though the column has UNIQUE constraint
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
I am trying to execute a php shortcode on button click but that is not running
I have a Python 27 code which is running two piped suprocess Popens with multiprocessing Pool as follows
I want to store user notification preferencesI do it like this: