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

Custom node style of graph.

expand codeexpand code
      Loading...
    

API#

Dependencies:

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

nz-graph#

ParameterDescriptionTypeDefault
[nzGraphData]Data sourceNzGraphData(data: NzGraphDataDef?)``
[nzRankDirection]Graph DirectionTB | BT | LR | RLLR
[nzAutoSize]Whether to automatically adjust the height of the node, the default equal heightbooleanfalse
[nzGraphLayoutConfig]Global config of graphNzGraphLayoutConfig``

Methods#

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

[nz-graph-zoom]#

ParameterDescriptionTypeDefault
[(nzZoom)]Default zoom scalenumber1
[nzMinZoom]Minimum zoom scalenumber0.1
[nzMaxZoom]Maximum zoom scalenumber10
(nzTransformEvent)Event of zooming() => NzZoomTransform``
(fitCenter)Move graph to center() => voidvoid
(focus)Move target node to center(e: SVGGElement, duration: number) => voidvoid

NzGraphData#

MethodDescriptionType
setDataset data source(data: NzGraphDataDef) => void
toggletoggle group node(nodeName: string) => void
expandexpand group node(nodeName: string) => void
expandAllexpand all group nodes(nodeName: string) => void
collapsecollapse group node(nodeName: string) => void
isExpandget if expanded of node(nodeName: string) => boolean
expansionModelmodel of expanded nodes' infoSelectionModel<string>

NzGraphLayoutConfig#

MethodDescriptionType
layoutgraph layout config{ nodeSep: number; rankSep: number; edgeSep: number; }
subScenegroup node config{ paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number; labelHeight: number; }
defaultCompoundNodegroup node size{ width: number; height: number; maxLabelWidth: number; }
defaultNodedefault node size{ width: number; height: number; labelOffset: number; maxLabelWidth: number; }

NzGraphDataDef#

ParameterDescriptionTypeDefault
nodesnodesArray<{ id: number|string; label?: string; width?: number; height?: number; [key: string]: any; }>[]
edgesedgesArray<{ v: number|string; w: number|string; [key: string]: any; }>[]
compoundgroup{ [parent: string]: string[]; }null

NzGraphNode#

ParameterDescriptionType
ididnumber|string
label?node contentstring
namenode namenumber|string
typenode type(group: 0, node: 1)number
parentNodeNameparentNode namestring
coreBoxcoreBox{ width: number; height: number; }
xOffsetx-offsetnumber
yOffsety-offsetnumber
widthwidthnumber
heightheightnumber
[key: string]user inputsany

NzGraphEdge#

ParameterDescriptionType
ididstring
vsource nodenumber|string
wtarget nodenumber|string
label?edge contentstring
pointspointsArray<{ x: number; y: number; }>

NzGraphGroupNode#

ParameterType
expandedboolean
nodesArray<NzGraphNode|NzGraphGroupNode>
edgesNzGraphEdge[]

[nzGraphNode]#

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]#

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]#

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#