Property 'transition' does not exist on type 'Selection<BaseType, {}, null, undefined>' in angular2

[justforuse]

I use angular-cli to generate a new project then I install d3

npm install d3 --savedev
npm install @types/d3 --save-dev

the version of angular is 4.0.0 and d3 is 4.8.0. and I add these to typings.d.ts

declare module 'd3' {
    export * from 'd3-array';
    export * from 'd3-axis';
    export * from 'd3-brush';
    export * from 'd3-chord';
    export * from 'd3-collection';
    export * from 'd3-color';
    export * from 'd3-dispatch';
    export * from 'd3-drag';
    export * from 'd3-dsv';
    export * from 'd3-ease';
    export * from 'd3-force';
    export * from 'd3-format';
    export * from 'd3-geo';
    export * from 'd3-hierarchy';
    export * from 'd3-interpolate';
    export * from 'd3-path';
    export * from 'd3-polygon';
    export * from 'd3-quadtree';
    export * from 'd3-queue';
    export * from 'd3-random';
    export * from 'd3-request';
    export * from 'd3-scale';
    export * from 'd3-selection';
    export * from 'd3-shape';
    export * from 'd3-time';
    export * from 'd3-time-format';
    export * from 'd3-timer';
    export * from 'd3-transition';
    export * from 'd3-voronoi';
    export * from 'd3-zoom';
}

and here is my app.component.ts:

import * as d3 from 'd3';
...
d3.select(this).select("path").transition().attr("d", function (d) {
    return arc2(<any>d);
})

but it occur an errror: Property 'transition' does not exist on type 'Selection<BaseType, {}, null, undefined>' in angular2 If I remove .transition(), everythind performs well. Is there any method to solve it? thanks for your advice.

[tomwanzek]

This repo has been deprecated in favour of the migrated definitions actively maintained in DefinitelyTyped.

For an example on how to use D3 within an Angular 2 project please see d3-ng2-demo. While it draws on the D3 Service provided by the d3-ng2-service, you can simply directly define a comparable service with the D3 modules your project requires in your angular-cli project.

If you look at the source code for the Brush Zoom 2 Component, you will see that transition compiles/works without issue.

In short, this should not be a definitions issue, but is likely a consequence of the unnecessary addition you indicated to the typings.d.ts file of your Angular project.

If, after reviewing the example code I referenced above and possibly using StackOverflow for how-to questions, you still experience what appears to be a bug, please open an issue on DefinitelyTyped and ping me there. Preferably with a link to a repo that reproduces the issue.

Thanks for understanding. :smile: T

[startewho]

I have the same problem.And my d3 version is 4.10.2,and use the latest types/d3 .I also try the d3-ng2-demo .It report the same problem.

[justforuse]

@startewho This problem occured when i use cnpm. You can try other ways

[startewho]

@justforuse the reason seems the ng-cli's problem.i update it to the latest(1.4.2) ,it work normal.Thank you so much.