Transition does not work

[askdong]

Hi,

I imported "Transtion" in the file header.

import { D3Service, D3, D3DragEvent, D3ZoomEvent, Selection, Transition } from 'd3-ng2-service';

and I called transtion function in below codes, and this is no error for syntax checking inside vscode.

           var data = this.d3G
          .selectAll("undrawedDies")
           .data(this._arrDies);

           data.enter()
           .append("rect")
          .attr("x", function (d, i) {return d.xCoord * d.xWidth - 1;})
           .attr("y", function (d, i) {return d.yCoord * d.yHeight - 1;})
           .attr("width", function (d) {return d.xWidth-1; })
           .attr("height", function (d) {return d.yHeight-1; })

           data.transition().duration(800)
          .attr("fill", function (d) {return d.fillColor});

but when I use angluar-cli to compiled codes, it tell me:

ERROR in E:/opensource-project/temp-aspnet/angularcli/d3-ng2-demo-master/src/app/d3-demos/wafer-map/wafer-map.component.ts (231,12): Property 'transit
ion' does not exist on type 'Selection<BaseType, DieRect, SVGGElement, any>'.
webpack: Failed to compile.

what's wrong with my codes?
thank you!

[tomwanzek]

What version of the service are you using and which versions of the @types/d3-selection and @types/d3-transition are currently installed with your project?

[askdong]

E:\opensource-project\temp-aspnet\angularcli\d3-ng2-demo-master>npm outdated
Package Current Wanted Latest Location
jquery 3.2.1 2.2.4 3.2.1 d3-ng2-demo
@angular/cli 1.0.0 linked linked d3-ng2-demo
@angular/common 4.0.0 linked linked d3-ng2-demo
@angular/compiler 4.0.0 linked linked d3-ng2-demo
@angular/compiler-cli 4.0.0 linked linked d3-ng2-demo
@angular/core 4.0.0 linked linked d3-ng2-demo
@angular/forms 4.0.0 linked linked d3-ng2-demo
@angular/http 4.0.0 linked linked d3-ng2-demo
@angular/platform-browser 4.0.0 linked linked d3-ng2-demo
@angular/platform-browser-dynamic 4.0.0 linked linked d3-ng2-demo
@angular/router 4.0.0 linked linked d3-ng2-demo
@types/jasmine 2.5.46 linked linked d3-ng2-demo
@types/node 7.0.12 linked linked d3-ng2-demo
bootstrap 3.3.7 linked linked d3-ng2-demo
codelyzer 3.0.0-beta.4 linked linked d3-ng2-demo
core-js 2.4.1 linked linked d3-ng2-demo
d3-ng2-service 1.8.0 linked linked d3-ng2-demo
jasmine-core 2.5.2 linked linked d3-ng2-demo
jasmine-spec-reporter 3.2.0 linked linked d3-ng2-demo
karma 1.5.0 linked linked d3-ng2-demo
karma-chrome-launcher 2.0.0 linked linked d3-ng2-demo
karma-cli 1.0.1 linked linked d3-ng2-demo
karma-jasmine 1.1.0 linked linked d3-ng2-demo
karma-remap-istanbul 0.6.0 linked linked d3-ng2-demo
ng2-signalr 2.0.2 linked linked d3-ng2-demo
protractor 5.1.1 linked linked d3-ng2-demo
rxjs 5.2.0 linked linked d3-ng2-demo
signalr 2.2.1 linked linked d3-ng2-demo
ts-helpers 1.1.2 linked linked d3-ng2-demo
ts-node 3.0.2 linked linked d3-ng2-demo
tslint 4.5.1 linked linked d3-ng2-demo
typescript 2.2.2 linked linked d3-ng2-demo
webdriver-manager 12.0.4 linked linked d3-ng2-demo
zone.js 0.8.5 linked linked d3-ng2-demo

so the version of d3-ng2-service is 1.8.0, and I did not install any @types/d3-****** separately. they should be installed automatically during d3-ng2-service installation and their version should be depended on d3-ng2-service's dependencies.

thank you!

[tomwanzek]

Thanks for the above, but can you please go into the node_modules for @types/d3-selection and @types/d3-transition and let me know their complete version number.

The d3-ng2-service pins only down to minor version, i.e. the patch numbers may change. I know that someone recently made changes to the type definitions for d3-transition. These could possibly affect the way the module augmentation from d3-transition to d3-selection works.

So the added info may be helpful to troubleshooting. Thanks in advance.

[askdong]

Please see below screen snapshot, thank you!

"name": "@types/d3-selection", "version": "1.0.13",

"name": "@types/d3-transition", "version": "1.0.8",

[tomwanzek]

@askdong Apologies for the delay, I have been AFK for purposes of open source for a few days.

I checked the d3-ng2-service (v1.8.0) on a blank @angular/cli project (v1.0.0). I.e. latest Angular 4, TS 2.2, and most importantly latest d3-ng2-service (D3 modules and related definitions newly installed).

I tested it out with a component that uses the transition() method on a selection. It compiles and serves without issues. The transition is fully functional at runtime.

So, could you create a minimally viable repo that reproduces your error? It is likely not with the service itself, but rather with the component implementation.

While stackoverflow is generally preferable for implementation questions, I don't mind double-checking, that I don't overlook an edgecase where the service/definitions fail(s).

But I would be prefer doing so by cloning a repo and checking it out in VSCode.

Cheers, T.

[tomwanzek]

@askdong Closing this for now. If you can provide me with a public repo link that exhibits the error, I will debug and reopen. Thanks for understanding.

[askdong]

SORRY, I missed github notification a few days ago.
I put all source codes into https://github.com/askdong/d3-ng2-signalr, please take a look!
Thank you :)

[tomwanzek]

Thanks for posting the link. I just cloned it quickly and did the following:

(1) npm install
(2) Uncommented the lines wafer-map.component.ts#L238-L239, which seem to have caused your compile time error
(3) Ran ng build -v => No compile/build time errors (consistent with my VS Code giving me the expected mouseover help on the transition() method)
(4) Ran ng build -v -prod => Only the following signalR related warning

Warning: Can't resolve all parameters for SignalR in C:/Users/TSR/vscode/d3-ng2-signalr/node_modules/ng2-signalr/src/services/signalr.d.ts: ([object Object], [object Object], ?). This will become an error in Angular v5.x

So in summary, I do not seem to be able to reproduce the build/compile error you experienced.

Note that my review was limited to the steps noted above, i.e. I did not do a deep dive into the components you wrote.

[askdong]

I downloaded my repository and followed your steps, and it worked to my surprise, that's very wired!

thank you anyway, thank you for your time!

[tomwanzek]

No worries.