In the index.html I add the lib:
d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");
typings install dt~d3 --save --global
npm install --save d3
As of now you have fundamentally the following two
import-based options to utilize D3 version 4 (Always conditional on using TypeScript 2):
Option 1 (Use of Standard D3 bundle)
npm install --save d3(The normal approach to installing the Standard D3 v4 Bundle)
npm install --save-dev @types/d3(Installs the definitions for the Standard D3 v4 Bundle) You should use
--save, if you are building a library to be used by other Angular 2 applications, so that the library consumer can develop with typing support)
import * as d3 from 'd3', e.g. in the module which creates a singleton D3 service to be injected into components on an as needed basis.
Option 2 (Use only what you need)
npm install --save d3-selection d3-transition d3-shape d3-scaleInstall only the modules you need for your project
npm install --save-dev @types/d3-selection @types/d3-transition @types/d3-shape @types/d3-scale(Install the matching definitions. Again, use
--save-devdepending on your use case.)
// d3-bundle.ts export * from 'd3-selection'; export * from 'd3-transition'; export * from 'd3-shape'; export * from 'd3-scale';
import * as d3 from './d3-bundle'
The approach under Option 2 is essentially what d3-ng2-service does. It can also give you an idea on how to build your own D3 Service, if the published one is not right for. You can always suggest improvements to it, of course.
I will say that, using the import-based options with
angular-cli has become a lost easier since it changed to Webpack 2 for module-loading/bundling.