'How to connect the elements with each other by a line Angular
How to connect the elements with a line like in the picture? When you click on one circle and then another, a line should be drawn. Maybe there is a library for this task, I've searched but haven't found anything useful. Angular.
Update
The size of the screen should also change the line. I was also thinking of applying libraries such as d3 and cytoscape, as they seem to allow for drawing such lines. Maybe someone has some examples?
Solution 1:[1]
I found solution for me: LeaderLine
Solution 2:[2]
You can use GoJs.
The GoJs is Compatible with angular. (Document)
This sample is similar to your needs: sample one, sample two
Solution 3:[3]
You can make this stuff with svg. since its only a few lines and circles. I stitch a small example together here : https://stackblitz.com/edit/angular-ivy-ovhbww Its basically use svg to draw things. Svg is create cause you can add events and also animation if you feel like it. With fairly simple code. What i put in the link is more of inspiration of how you could do it. Not so much that its the greatest piece of code :)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | senior_script |
| Solution 2 | Bahador Raghibizadeh |
| Solution 3 | Henrik Bøgelund Lavstsen |