Only one custom edge rendered.

[brn9966b]

Hello, I tried to add arrows on my graph and only one is rendered

Here is the code for my graph

<ngx-graph [view]="[1700,650]" class="w-100 chart-container" [enableZoom]="false" [draggingEnabled]="false"
    [showMiniMap]="true" [links]="links" [nodes]="nodes" [clusters]="clusters" layout="dagreCluster"
    (select)="onNodeSelect($event)" [update$]="update$">

    <ng-template #clusterTemplate let-cluster>
        <svg:g class="node cluster">
            <svg:rect rx="5" ry="5" [attr.width]="cluster.dimension.width" [attr.height]="cluster.dimension.height"
                [attr.fill]="cluster.data.color" />
        </svg:g>
    </ng-template>

    <ng-template #nodeTemplate let-node>
        <svg:g class="node">
            <svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height *1.25"
                [attr.fill]="node.data.color" />
            <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">
                {{node.numero}}
            </svg:text>
            <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height">
                {{node.label}}
            </svg:text>
        </svg:g>
    </ng-template>

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

      <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>
</ngx-graph>

Screenshots

ngx-graph version 7.2.0

Additional context Angular 10 & Bootstrap 5 used

Maybe I'm not doing it right, but I copied the example from the example.

Thanks for your time.

[jbj2021]

I had the same issue. I had numbers as the ids for links. I guess it was clashing with the node ids. I changed the link ids as alpha numeric and it started working. Hope it helps

[subhramira]

Same issue with me with ngx-graph:8.0.3 & angular:14.0.0.Even if after changing the link id to alphanumeric only one link is rendered

[rawsonhunter79]

Same issue with me with ngx-graph:8.0.3 & angular:14.0.0.Even if after changing the link id to alphanumeric only one link is rendered

I am also seeing this issue with ng-graph:8.0.3 & angular:14.1.0. Changing link and node ids did not fix for me. Is there any other workaround for this?

[rawsonhunter79]

Same issue with me with ngx-graph:8.0.3 & angular:14.0.0.Even if after changing the link id to alphanumeric only one link is rendered

This actually worked for me: https://github.com/swimlane/ngx-graph/issues/487#issuecomment-1419718384

[suryasyam61]

I also faced the same problem,

when I uninstall @type/d3 in devDependencies and reinstalled now its working

[Pellys98]

I have the same issue and tried all the proposed solutions, it still doesn't work.

[KlrSur0]

@Pellys98, it's the same for me. My project is with an angular 16 version. I always have the error. Have you found a solution?

[KlrSur0]

🔥 After one day of looking at it, I've found a solution => install the v8.2.2 of @swimlane/ngx-graph. You don't need to add the override.

[edangel1612]

en mi caso tengo angular 17 y me funciona tener la version 8.0.2 de ngx y de d3-selection la version 3.0.10

[Francesco-Borzi]

same issue here

[josmar131]

Same issue using the last version.