On software development, quality, security and broken racecars

Integrating D3.js with Angular to create reusable chart components. This is an updated version of the original post that covered integrating D3.js (version 4) with Angular 2. This version covers the latest Angular version (currently 4.2.4).

In this example, we’ll create a reusable Angular chart component using D3.js and @angular/cli.

Create App Scaffolding

If you have not updated your @angular/cli installation lately, you should do so before proceeding. This will insure you get the correct Angular package versions.

Create a new project with:

Shell

1

ng new angular-d3js

Install D3.js and Typings

Install the current version of D3.js and its typings with:

Shell

1

2

npm install --save d3

npm install --save-dev @types/d3

Create the Chart Component

Now generate the chart component stub with:

Shell

1

ng g component shared/BarChart

I’ve elected to place it in a “shared” directory, but you can put it anywhere you like. For example, you might elect to put it in a loadable module along with other component.

I tried this as well as cloning your github https://github.com/keathmilligan/angular-d3js.git and then doing npm i. When i do and ng serve I get the following

ERROR in /Users/paulcannell/git/angular-d3js/node_modules/@types/d3-geo/index.d.ts (39,19): Namespace ‘”/Users/paulcannell/git/angular-d3js/node_modules/@types/geojson/index”‘ has no exported member ‘CoordinateReferenceSystem’.

I went digging and sure enough there is no CoordinateReferenceSystem. Ive had this with another d3 library as well.