Issue with ngx-graph basic example from readme

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

I try to set up the most basic example usage of ngx-graph with angular 5.2.9. The base is a newly generated angular project with the CLI, and also i install the ngx-graph and ngx-charts with npm.

versions i’m using:

Angular CLI: 1.7.3
Node: 8.0.0
OS: linux x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

The modifications i did: I know in theory just the NgxGraphModule is needed to import, but without the other two i had a different error, and importing these was the solution.

@app.module.ts:

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { NgxGraphModule } from '@swimlane/ngx-graph';
...
  imports: [
...
    NgxGraphModule,
    NgxChartsModule,
    BrowserAnimationsModule
  ],
...

@app.component.html (this is just a copy of the example, nothing modified)

<ngx-graph
  class="chart-container"
  [view]="view"
  [legend]="showLegend"
  [links]="hierarchialGraph.links"
  (legendLabelClick)="onLegendLabelClick($event)"
  [nodes]="hierarchialGraph.nodes"
  [scheme]="colorScheme"
  [orientation]="orientation"
  [curve]="curve"
  (select)="select($event)">

  <ng-template #defsTemplate>
    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
      <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
    </svg:marker>
  </ng-template>

  <ng-template #nodeTemplate let-node>
    <svg:g class="node"
      ngx-tooltip
      [tooltipPlacement]="'top'"
      [tooltipType]="'tooltip'"
      [tooltipTitle]="node.label">
      <svg:rect [attr.width]="node.width" [attr.height]="node.height" [attr.fill]="node.options.color" />
      <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text>
    </svg:g>
  </ng-template>

  <ng-template #linkTemplate let-link>
    <svg:g class="edge">
      <svg:path
        stroke-width="2"
        marker-end="url(#arrow)" >
      </svg:path>
    </svg:g>
  </ng-template>

</ngx-graph>

@app.component.ts

...
export class AppComponent {
  title = 'app';

    public hierarchialGraph = {
    links: [  {
        source: 'start',
        target: '1',
        label: 'links to'
      }, {
        source: 'start',
        target: '2'
      },
    ],
    nodes: [  {
        id: 'start',
        label: 'start'
      }, {
        id: '1',
        label: 'Query ThreatConnect',
      }, {
        id: '2',
        label: 'Query XForce',
      }
    ],
  };

}

The error i have with this solution:

ERROR TypeError: Cannot read property 'domain' of undefined
    at new ColorHelper (index.js:8020)
    at GraphComponent../src/index.ts.GraphComponent.setColors (index.js:38876)
    at eval (index.js:38475)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4749)
    at ZoneDelegate.invoke (zone.js:387)
    at Zone.run (zone.js:138)
    at NgZone.run (core.js:4566)
    at GraphComponent../src/index.ts.GraphComponent.update (index.js:38467)
    at GraphComponent../src/common/base-chart.component.ts.BaseChartComponent.ngOnChanges (index.js:7233)

Also i get the same issue when i try to integrate ngx-graph to a more custom angular project. Are there anything i’m doing wrong? This message looks like an internal error to me. Thanks,

[rogercoder]

@gergo0206 All right! I finally got connecting lines to show up. I replaced the #linkTemplate from the readme example with the definition from app.component.html:

<ng-template #linkTemplate let-link>
    <svg:g class="edge">
      <svg:path
        class="line"
        stroke-width="2"
        marker-end="url(#arrow)" >
      </svg:path>
      <svg:text class="edge-label" text-anchor="middle">
        <textPath
          class="text-path"
          [attr.href]="'#' + link.id"
          [style.dominant-baseline]="link.dominantBaseline"
          startOffset="50%">
          {{link.label}}
        </textPath>
      </svg:text>
    </svg:g>
  </ng-template>

[gergo0206]

Thanks for the quick answer!

adding the colorScheme solved the original issue.

Now i have moveable nodes without arrows or connections, but it is a good start!

Also i had to install and add d3-shape to prevent some errors.

...
import * as shape from 'd3-shape';
...
public curve: any = shape.curveLinear;
...