8.0.3 breaks line rendering with d3-transition

[rookuu]

Describe the bug When updating to 8.0.3, some edges do not render and the following error is produced.

ERROR TypeError: linkSelection.attr(...).transition is not a function
    at swimlane-ngx-graph.mjs:1785:22
    at Array.map (<anonymous>)
    at QueryList.map (core.mjs:22857:30)
    at GraphComponent.redrawLines (swimlane-ngx-graph.mjs:1779:27)
    at NodeComponent.updateGraph (node.component.ts:116:13)
    at node.component.ts:81:12
    at timer (zone.js:2405:41)
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26218:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)

[aradys]

I have the same issue

[zsezs]

me too

I have the same issue

[neodescis]

This happens if you have multiple versions of d3-selection installed. The d3-transition package is attaching itself to a different version than what ngx is using. In my opinion, ngx-graph should list the d3 dependencies as peer dependencies to avoid this issue. However, we were able to work around it by "pinning" a single version of d3-selection. This can be done with npm or yarn. Here's what we did in package.json to get npm to pin a version:

"overrides": {
    "d3-selection": "3.0.0"
}

You can list the version that ngx-graph specifies, but 3.0.0 seems to work fine.

Here's an issue filed for d3 that kind of talks about the problem:

https://github.com/d3/d3/issues/3262

[nawnitraman]

We are also facing similar issue in using 8.0.3 with angular 15. Thanks @neodescis for suggesting a workaround, but unfortunately it did not resolved the issue for us. Greatly appreciate any additional recommendations.

[bonnm]

Same error here (Angular 14). Had to rollback to ngx 8.0.2...

[kiranatious]

Same error here (Angular 14). Had to rollback to ngx 8.0.2...

this solved the issue.. it works

[Kr0san89]

Did also see that issue, got it fixed with "d3-selection": "^1.2.0", npm i --legacy-peer-deps as it might be the wrong dependency for d3-transition

[bsarkadi]

I've had this issue on 8.2.1. This happens because ngx-graph has
"d3-selection": "^1.3.2" with "d3-transition": "^3.0.1" in the dependencies, but d3-transition 3.0.1 requires d3-selection 3.0.0. The d3-selection version should be bumped to 3.0.0.

Meanwhile this workaround solves the issue in your app's package.json:

"overrides": { "d3-selection": "3.0.0" },

[develobearmale]

This happens if you have multiple versions of d3-selection installed. The d3-transition package is attaching itself to a different version than what ngx is using. In my opinion, ngx-graph should list the d3 dependencies as peer dependencies to avoid this issue. However, we were able to work around it by "pinning" a single version of d3-selection. This can be done with npm or yarn. Here's what we did in package.json to get npm to pin a version:

"overrides": {
    "d3-selection": "3.0.0"
}

You can list the version that ngx-graph specifies, but 3.0.0 seems to work fine.

Here's an issue filed for d3 that kind of talks about the problem:

d3/d3#3262

@neodescis this solution works for me in Angular 16. Thank u.

[ZahiriNatZuke]

i am facing with the same issue, this its part of my package.json with dependecies that i have installed. I am running an angular project version 16.2.9.

"@swimlane/ngx-graph": "^8.2.3",
"d3": "^7.8.5",
"d3-scale": "^4.0.2",
"d3-scale-chromatic": "^3.0.0",
"d3-selection": "3.0.0",
"d3-shape": "3.2.0",
"@types/d3": "^7.4.3",
"@types/d3-dispatch": "^3.0.6",
"@types/d3-drag": "^3.0.7",
"@types/d3-shape": "^3.1.6",
"@types/d3-timer": "^3.0.2",
"@types/d3-transition": "^3.0.8",

[develobearmale]

i am facing with the same issue, this its part of my package.json with dependecies that i have installed. I am running an angular project version 16.2.9.

"@swimlane/ngx-graph": "^8.2.3",
"d3": "^7.8.5",
"d3-scale": "^4.0.2",
"d3-scale-chromatic": "^3.0.0",
"d3-selection": "3.0.0",
"d3-shape": "3.2.0",
"@types/d3": "^7.4.3",
"@types/d3-dispatch": "^3.0.6",
"@types/d3-drag": "^3.0.7",
"@types/d3-shape": "^3.1.6",
"@types/d3-timer": "^3.0.2",
"@types/d3-transition": "^3.0.8",

You put "override" atribute in your JSON file?

[edangel1612]

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

[jaykumarc]

hi @Kr0san89 . I have angular version 13 and "@swimlane/ngx-graph": "8.2.1" installed. I did added "overrides": { "d3-selection": "3.0.0" }

But still only one edge is rendering.

Also if i install this dependency as you mentioned - "d3-selection": "^1.2.0",

i am getting dependency conflict related warnings for 'd3-selection'.

Can you please provide any neat solution for this ? Thanks !

[Kr0san89]

Also if i install this dependency as you mentioned - "d3-selection": "^1.2.0",

i am getting dependency conflict related warnings for 'd3-selection'.

you can use npm i --legacy-peer-deps to get it installed. To get rid of the `--legacy-peer-deps``you can use overrides see https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides

As i don't use this override any more i'm not 100% sure, but something like

"overrides": { "@swimlane/ngx-graph": { "d3-selection": "1.2.0" } }

Can you please provide any neat solution for this ?

I created a PR to get d3 dependencies right https://github.com/swimlane/ngx-graph/pull/513 but unfortunately the maintainers did not merge it yet

hope this helps you

[jaykumarc]

Hi @Kr0san89 . I tried your given suggestion of adding overrides but no luck. only this thing is working for me - adding "d3-selection": "^1.2.0" as part of dependency (which is just giving dependency conflict related npm warnings). Thank you so much for your help ! I hope that your pull request gets merged as soon as possible.

[jaykumarc]

Also this ngx-graph has dependency on angular core/cli. with angular 17 it is throwing an error

[josmar131]

After a long night trying to get all the connections to draw correctly, I'll share how I managed to do it. Basically, the issue occurs when creating the path, which should set the d attribute ([attr.d]="link.line" ) like this:

<path class="edge" [attr.d]="link.line" marker-end="url(#arrow)"></path>

A short response on the topic, and here's an example of how the #linkTemplate would look:

<ng-template #linkTemplate let-link>
  <svg:g class="edge">
  
    <path class="edge" [attr.d]="link.line" marker-end="url(#arrow)"></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>

I use this version @swimlane/ngx-graph 8.4.0