Graph流程图

NG-ZORRO 实验性功能是指已发布但不稳定或者还未准备好用于生产环境的功能。

开发者或用户可以选择在正式发布前使用这些功能,但是每次发布版本时都可能存在 breaking changes

何时使用#

需要在网页上渲染 GRAPH 图时使用。

引入模块#

目前组件依赖 d3-drag d3-zoom d3-selection d3-transition d3-shape 用于绘制相关属性(可能会在之后的版本中逐步替换)

import { NzGraphModule } from 'ng-zorro-antd/graph';

引入样式#

@import 'node_modules/ng-zorro-antd/graph/style/entry.less';

代码演示

自定义 node 样式。

expand codeexpand code
      加载中
    

API#

安装依赖:

npm install dagre-compound dagre d3-transition d3-zoom d3-selection d3-shape d3-drag @types/d3

nz-graph#

参数说明类型默认值
[nzGraphData]数据源NzGraphData(data: NzGraphDataDef?)``
[nzRankDirection]图方向TB | BT | LR | RLLR
[nzAutoSize]是否根据节点内容自适应高度(默认等高)booleanfalse
[nzGraphLayoutConfig]全局配置NzGraphLayoutConfig``

组件方法#

名称描述
fitCenter()居中图并自适应缩放(如使用缩放功能请使用 nz-graph-zoom

[nz-graph-zoom]#

参数说明类型默认值
[(nzZoom)]缩放比例number1
[nzMinZoom]最小缩放number0.1
[nzMaxZoom]最大缩放number10
(nzTransformEvent)缩放事件() => NzZoomTransform``
(fitCenter)居中图并自适应缩放() => voidvoid
(focus)居中单个节点(e: SVGGElement, duration: number) => voidvoid

NzGraphData#

属性/方法说明类型
setData设置数据源(data: NzGraphDataDef) => void
toggle收起/展开 group 节点(nodeName: string) => void
expand展开 group 节点(nodeName: string) => void
expandAll展开全部 group 节点(nodeName: string) => void
collapse收起全部 group 节点(nodeName: string) => void
isExpand获取 group 节点展开状态(nodeName: string) => boolean
expansionModel展开节点存储对象SelectionModel<string>

NzGraphLayoutConfig#

属性说明类型
layout布局参数{ nodeSep: number; rankSep: number; edgeSep: number; }
subScenegroup 节点{ paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number; labelHeight: number; }
defaultCompoundNodegroup 节点 size{ width: number; height: number; maxLabelWidth: number; }
defaultNode默认节点 size{ width: number; height: number; labelOffset: number; maxLabelWidth: number; }

NzGraphDataDef#

属性说明类型默认值
nodes节点Array<{ id: number|string; label?: string; width?: number; height?: number; [key: string]: any; }>[]
edges线Array<{ v: number|string; w: number|string; [key: string]: any; }>[]
compound分组{ [parent: string]: string[]; }null

NzGraphNode#

属性说明类型
ididnumber|string
label?节点内容string
name节点名称number|string
type节点类型(组: 0, 节点: 1)number
parentNodeName父节点名称string
coreBox布局高宽{ width: number; height: number; }
xOffsetx 偏移number
yOffsety 偏移number
width宽度number
height高度number
[key: string]用户输入any

NzGraphEdge#

属性说明类型
ididstring
v起始节点number|string
w目标节点number|string
label?线内容string
pointspointsArray<{ x: number; y: number; }>

NzGraphGroupNode#

属性类型
expandedboolean
nodesArray<NzGraphNode|NzGraphGroupNode>
edgesNzGraphEdge[]

[nzGraphNode]#

自定义叶子节点渲染模板

<nz-graph [nzGraphData]="data">
  <ng-container *nzGraphNode="let node">
    <span>{{ node.name }} - {{ node.label }}</span>
  </ng-container>
</nz-graph>

[nzGraphGroupNode]#

自定义组节点渲染模板

<nz-graph [nzGraphData]="data">
  <ng-container *nzGraphGroupNode="let node">
    <span>{{ node.name }} - {{ node.label }}</span>
  </ng-container>
</nz-graph>

[nzGraphEdge]#

自定义边渲染模板

<nz-graph [nzGraphData]="data">
  <ng-container *nzGraphEdge="let edge">
    <svg:g>
      <path></path>
    </svg:g>
  </ng-container>
</nz-graph>

样式#

组件样式包含了必要的属性和简单的样式,你可以通过覆写下列类名自定义样式。

  • .nz-graphnz-graph 组件命名空间
  • .nz-graph-nodes 节点
    • .nz-graph-node 单个节点
    • .nz-graph-node-expanded 展开节点
    • .nz-graph-group-node 组节点
    • .nz-graph-base-node 叶子节点
  • .nz-graph-edges 连接线
    • .nz-graph-edge 单条线
      • path.nz-graph-edge-line 线 path 元素
      • .nz-graph-edge-text 线文本元素

说明#