I want to use d3js in angular2, but when I want to add transition when element change it occur an error: Property 'transition' does not exist on type 'Selection<BaseType, {}, null, undefined>' I use angular-cli to generate project, and the version of angular is 4.0.0, and d3js is 4.8.0

Here is my 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';

}

Here is my appponent.ts

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

If I remove transition() it performs good.

How to solve it? Thanks

I want to use d3js in angular2, but when I want to add transition when element change it occur an error: Property 'transition' does not exist on type 'Selection<BaseType, {}, null, undefined>' I use angular-cli to generate project, and the version of angular is 4.0.0, and d3js is 4.8.0

Here is my 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';

}

Here is my app.ponent.ts

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

If I remove transition() it performs good.

How to solve it? Thanks

• javascript
• angular
• d3.js
• transition

Share Improve this question Follow edited Apr 27, 2017 at 9:12 Mistalis 18.3k1414 gold badges7777 silver badges9797 bronze badges asked Apr 27, 2017 at 9:00 AllenAllen 2,19733 gold badges1717 silver badges2121 bronze badges 5

• can you post on jsfiddle? – cirofdo Commented Apr 27, 2017 at 20:07
• @TheBiro here is the github repo github./justforuse/angular2-d3-transition-issue, I don't know how to generate angular4 demo in jsfiddle, sorry – Allen Commented Apr 28, 2017 at 2:50
• 1 I tried npm uninstall --save-dev @types/d3, and restart project, everything works well and no error occured, So is that says @types/d3 has bug? – Allen Commented Apr 28, 2017 at 6:17
• well. I found the problem.. I use cnpm not npm to install the packages – Allen Commented Apr 29, 2017 at 5:53
• github./DefinitelyTyped/DefinitelyTyped/issues/16176 – Amrit Commented Jan 3, 2019 at 10:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I have fixed my code by:

import { select as d3Select } from 'd3-selection';
import { transition as d3Transition } from 'd3-transition';
d3Select.prototype.transition = d3Transition;

and then use d3Select in your code insted of select

you can follow: https://github./DefinitelyTyped/DefinitelyTyped/issues/16176