Coding the line connection and bubble graphics?

[ghost]

Hi Simon, I wanted to ask, how do you manage to code the line that is drawn between the parent node and it's child node in real time? I noticed that the child node tends to move around and follow the cursor, which is a really nice effect, and then the line is also rendered between the two elements.

I wanted to ask if you might be familiar with the D3.js library, because I've been studying the library for some time now and it seems like a really good way to manipulate DOM elements such as SVG, etc.

Thanks in advance for your time!

[Schneegans]

Hi there! All the corresponding code is in menu.ts. The connectors are actually div containers with a width corresponding to the distance between the corresponding nodes. They are positioned and rotated using CSS transformations. This happens in this method.

The bubble-effect also uses CSS transformations. Actually, the items are only scaled up a bit when the mouse pointer is close to them. This happens here.

D3.js could be a viable option to implement this. I decided to use plain JavaScript because it's not that complex after all. The only difficult choice is whether to use the DOM or a Canvas. If you go the Canvas route, things are likely more difficult to implement but potentially much more performant. For Canvas, you could use Paper.js.