Angular 中文文档

ngx-graph


A Graph visualization for angular

Documentation & Demos


https://swimlane.github.io/ngx-graph/

Installation


npm install @swimlane/ngx-graph --save
Import NgxGraphModule into your module
Use the ngx-graph component in your components

Usage


Simple


  1. ``` html
  2. <ngx-graph
  3.   class="chart-container"
  4.   [view]="[500, 200]"
  5.   [links]="[
  6.     {
  7.       id: 'a',
  8.       source: 'first',
  9.     target: 'second',
  10.       label: 'is parent of'
  11.     }, {
  12.       id: 'b',
  13.       source: 'first',
  14.       target: 'third',
  15.       label: 'custom label'
  16.     }
  17.   ]"
  18.   [nodes]="[
  19.     {
  20.       id: 'first',
  21.       label: 'A'
  22.     }, {
  23.       id: 'second',
  24.       label: 'B'
  25.     }, {
  26.       id: 'third',
  27.       label: 'C'
  28.     }
  29.   ]"
  30.   (select)="onNodeSelect($event)"
  31. >
  32. </ngx-graph>
  33. ```

Custom Templates


  1. ``` html
  2. <ngx-graph
  3.   class="chart-container"
  4.   [view]="[500, 550]"
  5.   [links]="[
  6.     {
  7.       id: 'a',
  8.       source: 'first',
  9.       target: 'second',
  10.       label: 'is parent of'
  11.     }, {
  12.       id: 'b',
  13.       source: 'first',
  14.       target: 'c1',
  15.       label: 'custom label'
  16.     }, {
  17.       id: 'd',
  18.       source: 'first',
  19.       target: 'c2',
  20.       label: 'custom label'
  21.     }, {
  22.       id: 'e',
  23.       source: 'c1',
  24.       target: 'd',
  25.       label: 'first link'
  26.     }, {
  27.       id: 'f',
  28.       source: 'c1',
  29.       target: 'd',
  30.       label: 'second link'
  31.     }
  32.   ]"
  33.   [nodes]="[
  34.     {
  35.       id: 'first',
  36.       label: 'A'
  37.     }, {
  38.       id: 'second',
  39.       label: 'B'
  40.     }, {
  41.       id: 'c1',
  42.       label: 'C1'
  43.     }, {
  44.       id: 'c2',
  45.       label: 'C2'
  46.     }, {
  47.       id: 'd',
  48.       label: 'D'
  49.     }
  50.   ]"
  51.   [clusters]="[
  52.     {
  53.       id: 'third',
  54.       label: 'Cluster node',
  55.       childNodeIds: ['c1', 'c2']
  56.     }
  57.   ]"
  58.   layout="dagreCluster"
  59. >
  60.   <ng-template #defsTemplate>
  61.     <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
  62.       <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
  63.     </svg:marker>
  64.   </ng-template>
  66.   <ng-template #clusterTemplate let-cluster>
  67.     <svg:g class="node cluster">
  68.       <svg:rect
  69.         rx="5"
  70.         ry="5"
  71.         [attr.width]="cluster.dimension.width"
  72.         [attr.height]="cluster.dimension.height"
  73.         [attr.fill]="cluster.data.color"
  74.       />
  75.     </svg:g>
  76.   </ng-template>
  78.   <ng-template #nodeTemplate let-node>
  79.     <svg:g
  80.       (click)="onNodeClick($event)"
  81.       (dblclick)="onNodeClick($event)"
  82.       class="node"
  83.       ngx-tooltip
  84.       [tooltipPlacement]="'top'"
  85.       [tooltipType]="'tooltip'"
  86.       [tooltipTitle]="node.label"
  87.     >
  88.       <svg:rect
  89.         [attr.width]="node.dimension.width"
  90.         [attr.height]="node.dimension.height"
  91.         [attr.fill]="node.data.color"
  92.       />
  93.       <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">
  94.         {{node.label}}
  95.       </svg:text>
  96.     </svg:g>
  97.   </ng-template>
  99.   <ng-template #linkTemplate let-link>
  100.     <svg:g class="edge">
  101.       <svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
  102.       <svg:text class="edge-label" text-anchor="middle">
  103.         <textPath
  104.           class="text-path"
  105.           [attr.href]="'#' + link.id"
  106.           [style.dominant-baseline]="link.dominantBaseline"
  107.           startOffset="50%"
  108.         >
  109.           {{link.label}}
  110.         </textPath>
  111.       </svg:text>
  112.     </svg:g>
  113.   </ng-template>
  114. </ngx-graph>
  115. ```

Data


Nodes


  1. ``` js
  2. [
  3.   {
  4.     id: '1',
  5.     label: 'Node A'
  6.   },
  7.   {
  8.     id: '2',
  9.     label: 'Node B'
  10.   },
  11.   {
  12.     id: '3',
  13.     label: 'Node C'
  14.   },
  15.   {
  16.     id: '4',
  17.     label: 'Node D'
  18.   },
  19.   {
  20.     id: '5',
  21.     label: 'Node E'
  22.   },
  23.   {
  24.     id: '6',
  25.     label: 'Node F'
  26.   }
  27. ];
  28. ```

Edges


  1. ``` js
  2. [
  3.   {
  4.     id: 'a',
  5.     source: '1',
  6.     target: '2'
  7.   },
  8.   {
  9.     id: 'b',
  10.     source: '1',
  11.     target: '3'
  12.   },
  13.   {
  14.     id: 'c',
  15.     source: '3',
  16.     target: '4'
  17.   },
  18.   {
  19.     id: 'd',
  20.     source: '3',
  21.     target: '5'
  22.   },
  23.   {
  24.     id: 'e',
  25.     source: '4',
  26.     target: '5'
  27.   },
  28.   {
  29.     id: 'f',
  30.     source: '2',
  31.     target: '6'
  32.   }
  33. ];
  34. ```

Clusters


  1. ``` js
  2. [
  3.   {
  4.     id: 'cluster0',
  5.     label: 'Cluster node',
  6.     childNodeIds: ['2', '3']
  7.   }
  8. ];
  9. ```

Credits


ngx-graph is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

SecOps Hub is an open, product-agnostic, online community for security professionals to share ideas, use cases, best practices, and incident response strategies.