Как создать DAG (график) с различными формами с помощью NGX-Graph

Я хочу создать график с пользовательскими формами узлов и пользовательскими цветами. Я также хочу, чтобы края были с метками на них. Как это сделать с помощью NGX-Graph (https://swimlane.github.io/ngx-graph /)

Например, вот образец графика, который я хочу построить.


angular directed-acyclic-graphs ngx-charts
person RV.    schedule 02.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете определить свой собственный шаблон для узла и настроить его по своему усмотрению:

<ngx-graph [legend]="false" [links]="graph.links" [scheme]="colorScheme" [nodes]="graph.nodes" [nodeWidth]="70" [nodeHeight]="70" [orientation]="'LR'" [curve]="curve">
  <ng-template #nodeTemplate let-node>
    <svg:g class="node">
      <svg:rect [attr.width]="node.width" [attr.height]="node.height" stroke="#3d465a" fill="#262C38" stroke-width="2" rx="15" ry="15" />
      <svg:rect [attr.width]="node.width - 10" [attr.height]="node.height - 10" [attr.fill]="node.options.color" rx="10" ry="10" x="5" y="5" />
      <svg:text class="node-type" alignment-baseline="central" [attr.x]="16" [attr.y]="15">
        {{node.type}}
      </svg:text>
      <svg:image alignment-baseline="central" [attr.x]="(node.width / 2) - 16" [attr.y]="25" [attr.width]="32" [attr.height]="32" [attr.xlink:href]="getImageForNode(node)" />
      <svg:text class="node-label" alignment-baseline="central" [attr.x]="(node.width / 2) - ((node.label.length * 5) / 2)" [attr.y]="85">
        {{node.label}}
      </svg:text>
    </svg:g>
  </ng-template>
</ngx-graph>

У вас есть доступ к данным узла в этом шаблоне, поэтому вы можете рисовать различные фигуры на основе свойств узла.

person Marjan    schedule 09.05.2018
comment
Если я правильно понимаю, вы имели в виду структуру типа <ngx-graph> <ng-template #template1> </ng-template> <ng-template #template2> </ng-template> </ngx-graph>. Как я могу использовать ссылку на разные узлы в графе для отображения разных фигур? - person RV.; 10.05.2018
comment
У вас есть ссылка на документацию по ngx-graph? - person sibaspage; 14.12.2018