TypeError: enteringTags.transition is not a function

[RogerioBaldiniIBM]

core.js?593e:1448 ERROR Error: Uncaught (in promise): TypeError: enteringTags.transition is not a function TypeError: enteringTags.transition is not a function at eval (index.js?78f1:271) at new ZoneAwarePromise (zone.js?6524:847) at TagCloud.eval (index.js?78f1:257) at step (index.js?78f1:42) at Object.eval [as next] (index.js?78f1:23) at eval (index.js?78f1:17) at new ZoneAwarePromise (zone.js?6524:847) at __awaiter (index.js?78f1:13) at TagCloud._updateDOM (index.js?78f1:241) at TagCloud.eval (index.js?78f1:184) at eval (index.js?78f1:271) at new ZoneAwarePromise (zone.js?6524:847) at TagCloud.eval (index.js?78f1:257)

[markisme]

@RogerioBaldiniIBM Can you show the related code about how you use it?

[RogerioBaldiniIBM]

I am trying to use this component, like in your example, in a complex project, with a lot of other components. I've isolated your component and the problem still goes on...

This is my package.json. Thanks a lot!

{ "name": "treelabpi", "version": "0.0.0", "description": "Description for treelabpi", "private": true, "license": "UNLICENSED", "cacheDirectories": [ "node_modules" ], "dependencies": { "@angular/animations": "^5.1.2", "@angular/cdk": "github:angular/cdk-builds", "@angular/common": "^5.1.2", "@angular/compiler": "^5.1.2", "@angular/core": "^5.1.2", "@angular/forms": "^5.1.2", "@angular/http": "^5.1.2", "@angular/material": "github:angular/material2-builds", "@angular/platform-browser": "^5.1.2", "@angular/platform-browser-dynamic": "^5.1.2", "@angular/platform-server": "^5.1.2", "@angular/router": "^5.1.2", "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.7", "angular-number-picker": "^2.2.0", "bootstrap": "4.0.0-beta.2", "chart.js": "^2.7.1", "core-js": "2.4.1", "d3": "^4.12.2", "d3-tagcloud": "^1.0.1", "font-awesome": "4.7.0", "jh-angular-number-picker": "0.0.5", "jquery": "3.2.1", "ng-jhipster": "0.3.4", "ngx-cookie": "2.0.1", "ngx-infinite-scroll": "0.5.1", "ngx-loading": "^1.0.14", "ngx-webstorage": "2.0.1", "reflect-metadata": "0.1.10", "rxjs": "5.5.5", "swagger-ui": "2.2.10", "tether": "1.4.0", "underscore": "^1.8.3", "zone.js": "0.8.16" }, "devDependencies": { "@angular/cli": "1.6.0", "@angular/compiler-cli": "^5.1.2", "@ngtools/webpack": "1.8.5", "@types/jasmine": "2.5.53", "@types/node": "8.0.18", "angular2-template-loader": "0.6.2", "awesome-typescript-loader": "3.2.2", "browser-sync": "2.18.13", "browser-sync-webpack-plugin": "1.2.0", "codelyzer": "4.0.1", "copy-webpack-plugin": "4.2.3", "css-loader": "0.28.4", "exports-loader": "0.6.4", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "generator-jhipster": "4.13.0", "html-loader": "0.5.0", "html-webpack-plugin": "2.30.1", "jasmine-core": "2.7.0", "karma": "1.7.1", "karma-chrome-launcher": "2.2.0", "karma-coverage": "1.1.1", "karma-intl-shim": "1.0.3", "karma-jasmine": "1.1.0", "karma-junit-reporter": "1.2.0", "karma-notify-reporter": "1.0.1", "karma-phantomjs-launcher": "1.0.4", "karma-remap-istanbul": "0.6.0", "karma-sourcemap-loader": "0.3.7", "karma-webpack": "2.0.4", "phantomjs-prebuilt": "2.1.16", "proxy-middleware": "0.15.0", "rimraf": "2.6.1", "sourcemap-istanbul-instrumenter-loader": "0.2.0", "string-replace-webpack-plugin": "0.1.3", "style-loader": "0.18.2", "to-string-loader": "1.1.5", "tslint": "5.5.0", "tslint-loader": "3.5.3", "typescript": "^2.6.2", "uglifyjs-webpack-plugin": "1.1.2", "web-app-manifest-loader": "0.1.1", "webpack": "3.10.0", "webpack-dev-server": "2.9.5", "webpack-merge": "4.1.1", "webpack-notifier": "1.5.0", "webpack-visualizer-plugin": "0.1.11", "workbox-webpack-plugin": "2.1.2", "write-file-webpack-plugin": "4.1.0", "xml2js": "0.4.17" }, "engines": { "node": ">=6.9.0" }, "scripts": { "lint": "tslint --project './tsconfig.json' -e 'node_modules/**'", "lint:fix": "yarn run lint -- --fix", "ngc": "ngc -p tsconfig-aot.json", "cleanup": "rimraf target/{aot,www}", "clean-www": "rimraf target//www/app/{src,target/}", "start": "yarn run webpack:dev", "serve": "yarn run start", "build": "yarn run webpack:prod", "test": "yarn run lint && karma start src/test/javascript/karma.conf.js", "test:watch": "yarn test -- --watch", "webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060 --watch-content-base", "webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --progress --profile", "webpack:build": "yarn run cleanup && yarn run webpack:build:main", "webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile", "webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www", "webpack:test": "yarn run test", "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js", "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js", "postinstall": "node node_modules/phantomjs-prebuilt/install.js" } }

[markisme]

@RogerioBaldiniIBM Ok, some problems. Why there is some dependences with empty name in your package.json file? In the example, I init the TagCloud component with this

this.tagCloud = new TagCloud(this.cloudEle.nativeElement);

And I use @ViewChild bind the html element to this.cloudEle, notice that @ViewChild is an decoration in Angular2. In your package.json , I doesn't see the dependences of angular2. Did your project is using Angular2? I guess the problem is the html element you pass to the constructor of TagCloud component. Maybe you can post your code about how you init TagCloud like i did it with new TagCloud(this.cloudEle.nativeElement) And how you bind your html element.

[RogerioBaldiniIBM]

Hi markisme, thanks a lot for helping on this. I don't know why some dependencies are empty when I pasted the code here. But, whatever, this dependencies are related to angular 5, more exactly, angular 5.1.2. I have debugged the typescript and the this.cloudEle element is been capture correctly.

nativeElement = div.tag-cloud

and enteringTags = _groups = [Array(40)] _parents = [g]

Thanks again...

[markisme]

@RogerioBaldiniIBM I am not understand how you get nativeElement with nativeElement = div.tag-cloud, it's recommend to use ViewChild to get an element in angular. Actually it is angular5 in my example too.Maybe you can check the example and have a try to debug where the problem is. It's difficult to determine your problem without the related code.

[RogerioBaldiniIBM]

@markisme I 've tried to reproduce this error in my application. It's in https://www.dropbox.com/s/8idla6uar8spvu9/treelabpi.zip?dl=0

yarn install yarn start

Tagcloud is at homepage.

Thanks.

[markisme]

@RogerioBaldiniIBM Thx for your feedback. I'm very sorry for the delay response for so long a time. I have download your project and debug it. It seems is an issue with d3.js. Refer to that: https://github.com/d3/d3/issues/3262 And you can add these imports code below in home.component.ts to make it work temporary.

import "d3-transition";

I will also make some changes and try to solve this problem in the package level.

[markisme]

@RogerioBaldiniIBM You can try if it have been fix with v1.0.2

[nitinanand27]

Similar issue so Copying my query because i'm unsure if previous issue is closed or open.

Hi- i'm having same issue with selection.transition( ) any help would be appreciated

Error Message on Mouseover:- __ERROR TypeError: tooltip1.transition is not a function at SVGCircleElement.eval (line-chart.component.ts:278) at SVGCircleElement.eval (on.js:27) at ZoneDelegate.invokeTask (zone.js:398) at Object.onInvokeTask (core.js:4724) at ZoneDelegate.invokeTask (zone.js:397) at Zone.runTask (zone.js:165) at SVGCircleElement.ZoneTask.invoke (zone.js:460)

version:- d3: 4.9.1 types/d3: 4.8.0 d3-transition: 1.1.1 d3-selection: 1.2.0

Code from my component.ts

import { config } from 'app/config';
import * as d3 from 'd3';
import * as d3Selection from 'd3-selection';
import * as d3Scale from 'd3-scale';
import * as d3Axis from 'd3-axis';
import * as d3Shape from 'd3-shape';
import * as d3Array from 'd3-array';
import * as d3Format from 'd3-format';
import * as moment from 'moment';
@ViewChild('chart') private chartContainer: ElementRef;

  private tooltip: any;

this.tooltip = d3.select(element).append('div')
  .attr('class', 'tooltip')
  .style('opacity', 0);

  const tooltip = d3.select(this.chartContainer.nativeElement).selectAll('.tooltip');
            .....................
                   .on('mouseover', function (d) {
          tooltip.transition( ) //error here
            .duration(400)
            .style('opacity', 1);
          tooltip.html(
            site.headline + ' ' + (d.y > 1 ? d.y.toFixed(0) : d.y.toFixed(3))
          )
            .style('left', (d.posX - 40) + 'px')
            .style('top', (d.posY + 40) + 'px');
        })
        .on('mouseout', function (d) {
          tooltip.transition()
            .duration(500)
            .style('opacity', 0);
        });
    });

[markisme]

@nitinanand27 The function selection.transition( )is exported by package d3-transition, So if this package is not packed up to your project, transition() will be undefined. you can try to import "d3-transition" in your code. BTW, that's an issue of d3 , refer to that https://github.com/tomwanzek/d3-v4-definitelytyped/issues/117

[azzimuth]

@markisme we tried to add import "d3-transition" but that doesn't help...

UPDATE: Solved by upgrading d3 package to 5.1.0

[markisme]

@azzimuth Oh, I forget to mention that update is also an solution because it's an fixed issue for d3. And congrats!