如何从 Angular 7 的 ngx-graph 开始

How to start with ngx-graph for Angular 7

我正在尝试使用 Angular 7 的 ngx-graph 创建网络图。但是由于文档不是很好,而且演示对于初学者来说太多了,我将不胜感激如何开始使用 ngx-graph 的任何帮助。也许有一个小例子,有 2 个节点,它们之间有 1 个 link。

我希望有人能帮助我。

谢谢:)

有它的文档:https://github.com/swimlane/ngx-graph

首先,安装D3依赖包:

npm install @swimlane/ngx-graph --save
npm install d3 --save

并将 NgxGraphModule 导入您的模块 (app.module.ts)。

之后,你可以在你的组件中使用<ngx-graph></ngx-graph>组件(HTML),在组件逻辑中使用数据。该文档解释了如何设置数据和所需属性,并提供了示例。

Demo

Demo-Code

在您使用 ngx-graph 做更多事情并希望根据您的需要进行自定义之前,必须阅读 ngx-graph 文档以更好地理解它。 https://github.com/swimlane/ngx-graph

这是我的自定义代码,不仅从基础开始,而且从使用 GUI 添加、连接和删除节点等非常重要的功能开始。 https://github.com/rat17sri/ngx-graph-angular

演示:https://rat17sri.github.io/ngx-graph-angular/