npm 包 ngx-dag 使用教程

本文介绍了 Angular 的 npm 包 ngx-dag 的使用方法，该包提供了一种用于构建复杂工作流程和数据流的可视化工具。本文详细讲解了如何安装 ngx-dag 包、如何创建和渲染一个流图（dag 图）、如何自定义节点和连接线等。

什么是 ngx-dag?

ngx-dag 是一个 Angular 的 npm 包，提供了用于构建复杂工作流程和数据流的可视化工具。ngx-dag 提供了一个基于 HTML5 Canvas 的可视化引擎和一组可自定义的节点和连接线，使我们可以方便地创建、编辑和渲染一个流图（dag 图）。

如何安装?

$ npm install ngx-dag --save

创建流图

1. 导入模块

import { DagModule } from 'ngx-dag';

1. 添加 module

@NgModule({
  imports: [
    DagModule
  ]
})
export class AppModule { }

1. 创建 html 模板

<dag
  [nodes]="nodes"
  [edges]="edges"
  [layout]="layout"
  [select]="true"
  (nodeClick)="nodeClick($event)"
  (nodeContextmenu)="nodeContextmenu($event)">
</dag>

1. nodeClick 与 nodeContextmenu 事件

nodeClick(eventVal: any) {
  console.log(`nodeClick: ${JSON.stringify(eventVal)}`);
}

nodeContextmenu(eventVal: any) {
  console.log(`nodeContextmenu: ${JSON.stringify(eventVal)}`);
}

自定义节点和连接线

自定义节点

1. 导入模块

import { DagModule, CommonModule } from 'ngx-dag';

1. 添加 module

-- -------------------- ---- -------
-----------
  -------- -
    -------------
    ---------
  -
--
------ ----- --------- -
  ------------------- ---------------- ----------------- -
    -- -------- --------
    --------------------
  -

  -------------- -
    ----- -------- - ----------------------------------------- ------
    ----------------------------------------------------- --------------------------
  -
-

1. 创建 html 模板

-- -------------------- ---- -------
---- -------- -------------------------------
  ---- -------------------- --- ------- --- -- ---------------
  ---- --------------
    ---- ----------------
      ----- ------------------- ---- ----- -----------
      ------- --------------- --------------------------------- ---- ---------------
    ------
    ---- ------------- -----------------------------------
      ---- ---- ----------
    ------
  ------
------

自定义连接线

1. 导入模块

import { DagModule, CommonModule } from 'ngx-dag';

1. 添加 module

-- -------------------- ---- -------
-----------
  -------- -
    -------------
    ---------
  -
--
------ ----- --------- -
  ------------------- ---------------- ----------------- -
    -- --------- --------
    --------------------
  -

  -------------- -
    ----- -------- - ----------------------------------------- ------
    ----------------------------------------------------- --------------------------
  -
-

1. 创建 html 模板

<div dag-edge class="your-custom-edge-class">
  <span dag-edge-handle></span>
</div>

结语

本文介绍了 npm 包 ngx-dag 的使用方法，主要包含了如何安装 ngx-dag 包、如何创建和渲染一个流图（dag 图）、如何自定义节点和连接线等。ngx-dag 提供了一种方便、快速构建复杂工作流程和数据流的可视化工具，能够帮助开发人员极大地提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005755781e8991b448ea513