Angular 5个SVG流程图npm插件

Question

您好，我在我的项目中使用 Angular 5，我需要创建流程图。我搜索并找到了一些插件，但它们不提供我需要的这些功能：

1. add/delete/redraw 节点的能力（应该有一个节点数组，这样当我更新它时，流程图会重新绘制）。
2. 在节点上放置标签并向其添加工具提示。
3. 能够在点击节点时做一些事情。
4. 平移和缩放

提前致谢

Answer 1

我建议 ngx-graph，它具有您要求的所有功能。看看demo。 这是 link in github

Answer 2

在商业场景中，您可能希望查看 yFiles for HTML. It can easily do all what you ask for in your list and has great Angular integration 允许您以交互方式和编程方式修改图表、绑定数据以填充图表结构和呈现节点可视化、工具提示、上下文菜单等

该库提供了最广泛的可用范围 automatic layout algorithms，因此您无需自己安排图表，但可以轻松地从绑定数据中获得漂亮的绘图。

虽然它是一个纯 JavaScript 库，但它为整个库提供了完整的 TS 绑定，因此您可以在 JS 和 TS 之间进行选择，或者在开发过程中同时使用，并获得不错的代码完成和文档查找。

^{免责声明：我为创建该库的公司工作，但我不代表我的雇主。}