如何用一条线将元素相互连接 Angular

How to connect the elements with each other by a line Angular

如何像图中那样用线连接元素?当您单击一个圆圈然后单击另一个圆圈时,应绘制一条线。也许这个任务有一个图书馆,我已经搜索过但没有找到任何有用的东西。 Angular.

更新

屏幕大小也要改线。我也在考虑应用 d3 和 cytoscape 等库,因为它们似乎允许绘制此类线条。也许有人有一些例子?

您可以使用 GoJs.

GoJ 与 angular 兼容。 (Document)

此示例与您的需求相似:sample one, sample two

你可以用 svg 制作这些东西。因为它只有几行和几圈。我在这里拼接一个小例子:https://stackblitz.com/edit/angular-ivy-ovhbww 它基本上使用 svg 来绘制东西。 Svg 是创建的,因为您可以根据需要添加事件和动画。使用相当简单的代码。我放在 link 中的内容更多是关于如何做到这一点的灵感。与其说它是最伟大的代码:)

我找到了适合我的解决方案:LeaderLine