Issue with ngx-graph basic example from readme about ngx-graph HOT 5 CLOSED

@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>

from ngx-graph.

Your colorScheme is not defined in your component.

Add this in your component class:

public colorScheme = {
  domain: ['#5AA454', '#A10A28', '#C7B42C'], // or whatever colors you want
}

from ngx-graph.

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;
...

from ngx-graph.

@gergo0206 Thanks to you I was also able to finally get some movable nodes, but without any connections. Would be great to have a simple hello world example for this library.

from ngx-graph.

Thanks, @rogercoder i had the same issue when the connecting arrows does not show up. I found out that the arrows are exists, but all of them are invisible, and has zero length. I decided to struggle with it by myself, but your solution is a good shortcut and now i have a working basic example.

from ngx-graph.