Ngx-charts: node.transition is not a function Angular 5

[fausfore]

Hy every one !

I have some bad issue with a Angular/[email protected] project when i turn on transition

dependencies :

"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@swimlane/ngx-charts": "^7.0.1",
"core-js": "^2.4.1",
"moment": "^2.19.2",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
 "d3": "^4.2.2",

node.transition is not a function

Help me please !

[billdwhite]

same thing here; found it after upgrading to d3 4.12.0 (which I assume you have as well since you've got ^ in your d3 package version). If you lock it to 4.11.0, I suspect it will go away but not sure why it is now happening

[seangwright]

Running into this as well. Here is a snippet from my package.json

"dependencies": {
    "@angular/animations": "5.1.3",
    "@angular/cdk": "5.0.1",
    "@angular/common": "5.1.3",
    "@angular/compiler": "5.1.3",
    "@angular/core": "5.1.3",
    "@angular/forms": "5.1.3",
    "@angular/http": "5.1.3",
    "@angular/material": "5.0.1",
    "@angular/platform-browser": "5.1.3",
    "@angular/platform-browser-dynamic": "5.1.3",
    "@angular/router": "5.1.3",
    "@swimlane/ngx-charts": "7.0.1",
    "angular-calendar": "0.23.1",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.5.3",
    "d3": "4.12.2",
    "font-awesome": "4.7.0",
    "moment": "2.20.1",
    "rxjs": "5.5.6",
    "zone.js": "0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "5.1.3",
    "@angular/language-service": "5.1.3",
    ...
    "typescript": "2.5.3"

[billdwhite]

yep, I was hopeful that the 4.12.2 release of d3 would fix this problem when it appeared in 4.12.0, but no such luck

[billdwhite]

@sgwatgit the workaround of rolling back d3 to 4.11.0 will fix your issue temporarily but ultimately we need to get d3 fixed. I suspect this has something to do with the interaction between d3 and web pack or something like that. I'm trying to create a simple demo to show the problem so I can file an issue on the d3 site, but I haven't had a chance to get it done yet...

[billdwhite]

One thing you might try: in your package.json devDependencies section, add

"uglify-es": "3.3.5"

to lock down that package. I was trying to fix another issue by adding that and now d3 4.12.2 works for me. Perhaps the "3.3.7" (current version) of this package was causing Webpack to mess up the libraries? Just a guess at this point.

[joeltonmats]

Hello, this error didnt go fixed.

 "@swimlane/ngx-charts": "^9.0.0",
"d3": "^4.11.0"

We got :

ERROR TypeError: node.transition is not a function

[adaykin]

I'm still running into this issue, here's my package.json:

{
"dependencies": {
"@angular/animations": "^6.1.10",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.10",
"@angular/core": "^6.1.10",
"@angular/forms": "^6.1.10",
"@angular/http": "^6.1.10",
"@angular/platform-browser": "^6.1.10",
"@angular/platform-browser-dynamic": "^6.1.10",
"@angular/router": "^6.1.10",
"@angular/upgrade": "^6.1.10",
"@ng-bootstrap/ng-bootstrap": "^3.2.2",
"@swimlane/ngx-charts": "^9.1.1",
"@types/chart.js": "^2.7.38",
"@types/codemirror": "0.0.56",
"bootstrap": "^4.1.3",
"chart.js": "^2.7.3",
"chartjs-plugin-datalabels": "^0.1.0",
"classlist.js": "^1.1.20150312",
"codemirror": "^5.40.2",
"core-js": "^2.5.7",
"d3": "^4.13.0",
"d3-selection": "^1.3.0",
"intl": "^1.2.5",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",
"primeng": "^5.2.7",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.3.3",
"safe-pipe": "^0.3.0",
"svgxuse": "^1.2.4",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/cli": "^1.7.4",
"@angular/compiler": "^6.1.10",
"@angular/compiler-cli": "^6.1.10",
"@types/d3": "^5.0.1",
"@types/jasmine": "2.5.38",
"@types/node": "^7.10.0",
"codelyzer": "^4.0.0",
"enhanced-resolve": "3.3.0",
"jasmine": "^2.99.0",
"jasmine-core": "^2.99.1",
"jasmine-spec-reporter": "^3.2.0",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.1.1",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"lato-font": "^3.0.0",
"ng2-file-upload": "^1.2.1",
"node-sass": "^4.9.3",
"protractor": "^5.4.1",
"ts-node": "^2.0.0",
"tslint": "^5.0.0",
"typescript": "^2.7.2",
"webpack-sources": "^1.3.0"
},
"scripts": {
"build": "ng build --prod --progress=false",
"build-watch": "ng build --dev --watch --verbose",
"clean": "rimraf \"./target/classes/static/*\"",
"test": "ng test --single-run",
"test-watch": "ng test"
}
}

[Koslun]

Running into this as well when upgrading to version 10.0.0 from 9.0.0 and Angular 7. Where yarn automatically sets d3 version ^4.10.2 as direct dependency to this library and thus starts resolving a d3 dependency to 4.13.0.

Adding d3 to 4.11.0 to my own dependencies did not solve this automatically by running yarn. Had to:

1. Specifically add "d3": "4.11.0", to my package.json file (before changing the version of this library)
2. Run yarn.
3. Go into the yarn.lock file and change [email protected]: into [email protected], d3@^4.10.2:.
4. Change this library to version 10.0.0 (from 9.0.0).
5. Run yarn again.

Step 3 tricks yarn into believing that I previously had that d3 range set to 4.11.0 and thus makes it skip trying to upgrade that range.

Another quick-fix for the Tree map component is to turn off animations by passing false to the input animations (see doc).

According to https://github.com/d3/d3-selection/issues/185#issuecomment-421026611 and bugzilla the bug appears to be caused by two issues:

1. A change in d3-selection version 1.3.1 changes the prototype in a way that seems to cause loading multiple versions of it to throw the error.
2. D3 version 4 pins to specific versions of the different d3 packages, causing duplicate versions of d3-selection to load due to how the d3 modules depend on each other. Which in turn throws an error due to 1 above.

Issue 1 is supposedly fixed by this PR according to https://github.com/d3/d3-selection/issues/185#issuecomment-437164560.

Issue 2 can also be fixed if this library upgrades to d3 version 5 as that does not pin the versions of the individual d3 packages, solving this issue. At least according to bugzilla. So for this library I would simply go with upgrading to d3 version 5 as it's something that should be done at some point either way.

[sheikhsameer1609]

I had the similar issues when I used it with ngx-charts, with following versions

   "@swimlane/ngx-charts": "^8.1.0",
    "d3": "4.7.4"

It turned out to be due to transitive dependencies. Following changes worked out for me:

1. Reverted back package-lock.json to the working one
2. Added the d3 selection and d3-transition explicitly in package.json file

    "d3-selection": "^1.1.0",
    "d3-transition": "^1.3.2"

1. npm install

[PetroBalkan]

I fixed this issue after deleting yarn.lock file and node_modules folder. after that, I run yarn install

[ahadjithoma]

still getting the error in

Angular: 9.1
@swimlane/ngx-charts: 13.0.3
d3: 4.13.0

any ideas?

[TheParad0X]

Same problem here.
"@angular/core": "^10.1.2",
"@swimlane/ngx-charts": "^16.0.0",

[Koslun]

I experienced this same issue again now when upgrading to version 16 from version 13.

From reading my own comment from almost two years ago I realise that it's again due to clashing d3 dependencies which in turn stem from d3 dependencies which have gradually become duplicated even if they're all originally from the same source. As we had no other dependencies relying on d3 apart from this library it worked to simply refresh the d3 dependencies in our yarn.lock, i.e.:

1. Remove this dependency from package.json
2. Re-install dependencies (yarn install) - this removes all d3 dependencies from the yarn.lock file.
3. Add this dependency back to package.json
4. Re-install dependencies again - which automatically re-adds all d3 dependencies to the yarn.lock file.

We had multiple entries of multiple d3 packages but I do assume that it was again d3-selection in particular which caused the issue. Following above steps regardless fixed the issue for us.

[KlausHans]

These steps solved the issue for me:

• delete all contents in node_modules
• delete yarn.lock
• run yarn install

[Koslun]

These steps solved the issue for me:
delete all contents in node_modules
delete yarn.lock
run yarn install

Notably, these are virtually the same steps I did just that it will affect all your dependencies. Should be able to skip deleting contents in node_modules.

The more permanent fix however should however remain the same as I mentioned a few years ago. Upgrading the library to version 5 or higher.