Graph

NG-ZORRO experiments are features that are released but not yet considered stable or production ready
Developers and users can opt-in into these features before they are fully released. But breaking changes may occur with any release.

When To Use#

When you want to use graph in Angular.

Import Module#

Now, the graph depends on d3-drag d3-zoom d3-selection d3-transition d3-shape (may be removed in next major version)

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

Import Style#

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

Examples

LRRLTBBT

Custom graph node

Custom node style of graph.

      Loading...

API#

Dependencies:

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

nz-graphcomponent#

Parameter	Description	Type	Default
`[nzGraphData]`	Data source	`NzGraphData(data: NzGraphDataDef?)`	``
`[nzRankDirection]`	Graph Direction	`TB` \| `BT` \| `LR` \| `RL`	`LR`
`[nzAutoSize]`	Whether to automatically adjust the height of the node, the default equal height	`boolean`	`false`
`[nzGraphLayoutConfig]`	Global config of graph	`NzGraphLayoutConfig`	``

Methods#

Method	Description
`fitCenter()`	Move graph to center(use `nz-graph-zoom` instead if zooming is enabled)

[nz-graph-zoom]directive#

Parameter	Description	Type	Default
`[(nzZoom)]`	Default zoom scale	`number`	`1`
`[nzMinZoom]`	Minimum zoom scale	`number`	`0.1`
`[nzMaxZoom]`	Maximum zoom scale	`number`	`10`
`(nzTransformEvent)`	Event of zooming	`() => NzZoomTransform`	``
`(fitCenter)`	Move graph to center	`() => void`	`void`
`(focus)`	Move target node to center	`(e: SVGGElement, duration: number) => void`	`void`

NzGraphData#

Method	Description	Type
`setData`	set data source	`(data: NzGraphDataDef) => void`
`toggle`	toggle group node	`(nodeName: string) => void`
`expand`	expand group node	`(nodeName: string) => void`
`expandAll`	expand all group nodes	`(nodeName: string) => void`
`collapse`	collapse group node	`(nodeName: string) => void`
`isExpand`	get if expanded of node	`(nodeName: string) => boolean`
`expansionModel`	model of expanded nodes' info	`SelectionModel<string>`

NzGraphLayoutConfig#

Method	Description	Type
`layout`	graph layout config	`{ nodeSep: number; rankSep: number; edgeSep: number; }`
`subScene`	group node config	`{ paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number; labelHeight: number; }`
`defaultCompoundNode`	group node size	`{ width: number; height: number; maxLabelWidth: number; }`
`defaultNode`	default node size	`{ width: number; height: number; labelOffset: number; maxLabelWidth: number; }`

NzGraphDataDef#

Parameter	Description	Type	Default
`nodes`	nodes	`Array<{ id: number\|string; label?: string; width?: number; height?: number; [key: string]: any; }>`	`[]`
`edges`	edges	`Array<{ v: number\|string; w: number\|string; [key: string]: any; }>`	`[]`
`compound`	group	`{ [parent: string]: string[]; }`	`null`

NzGraphNode#

Parameter	Description	Type
`id`	id	`number\|string`
`label?`	node content	`string`
`name`	node name	`number\|string`
`type`	node type(group: 0, node: 1)	`number`
`parentNodeName`	parentNode name	`string`
`coreBox`	coreBox	`{ width: number; height: number; }`
`xOffset`	x-offset	`number`
`yOffset`	y-offset	`number`
`width`	width	`number`
`height`	height	`number`
`[key: string]`	user inputs	`any`

NzGraphEdge#

Parameter	Description	Type
`id`	id	`string`
`v`	source node	`number\|string`
`w`	target node	`number\|string`
`label?`	edge content	`string`
`points`	points	`Array<{ x: number; y: number; }>`

NzGraphGroupNode#

Parameter	Type
`expanded`	`boolean`
`nodes`	`Array<NzGraphNode\|NzGraphGroupNode>`
`edges`	`NzGraphEdge[]`

[nzGraphNode]directive#

Customize the graph node template

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

[nzGraphGroupNode]directive#

Customize the graph group-node template

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

[nzGraphEdge]directive#

Customize the graph edge template

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

Styling#

The Component styles only contain the necessary positional properties and simple styles, you can customize the style by overriding the following class.

.nz-graphnz-graph The nz-graph component namespace
.nz-graph-nodes The class name of container covered all nodes
- .nz-graph-node The class name of nz-graph-node
- .nz-graph-node-expanded The class name of expanded node
- .nz-graph-group-node The class name of group node
- .nz-graph-base-node The class name of leaf(OP) node
.nz-graph-edges The class name of container covered edges in the target node
- .nz-graph-edge The class name of edge
  - path.nz-graph-edge-line The class name of svg:path element
  - .nz-graph-edge-text The class name of svg:text element

More#

dagre-compound: Dagre-based nested layout calculation library
SelectionModel