TL;DR: d3.js should be installed via npm, as should the typings. Accepted answer has details. I was new to Angular when I wrote this question. The npm process is the standard: for tree-shaking, package management, updating etc

I have an Angular 2 project (it's the Quick Start project for simplicity), and I'm importing d3.js version 4. There is no TypeScript definitions with d3, as it's javascript only.

In the index.html I add the lib:

<script src=".v4.min.js"></script>

In the typescript appponent.ts, I reference the d3.select().... and it works fine - draws a circle:

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");

Visual Studio Code does not recognise d3 so I install the typings from DefinitelyTyped - the IDE then recognises d3, and I get code completion etc:

typings install dt~d3 --save --global

Now, I tried a second project, but went the npm route, npm install --save d3 and I can reference the d3.js via the node_modules in index.html using

<script src="node_modules/d3/build/d3.min.js"></script>

But, I do not see why I would use npm in this instance? I'm not using import statements for d3 in the component.ts files, and it works ok anyway. Maybe I'm missing something here?

TL;DR: d3.js should be installed via npm, as should the typings. Accepted answer has details. I was new to Angular when I wrote this question. The npm process is the standard: for tree-shaking, package management, updating etc

I have an Angular 2 project (it's the Quick Start project for simplicity), and I'm importing d3.js version 4. There is no TypeScript definitions with d3, as it's javascript only.

In the index.html I add the lib:

<script src="https://d3js.org/d3.v4.min.js"></script>

In the typescript app.component.ts, I reference the d3.select().... and it works fine - draws a circle:

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");

Visual Studio Code does not recognise d3 so I install the typings from DefinitelyTyped - the IDE then recognises d3, and I get code completion etc:

typings install dt~d3 --save --global

Now, I tried a second project, but went the npm route, npm install --save d3 and I can reference the d3.js via the node_modules in index.html using

<script src="node_modules/d3/build/d3.min.js"></script>

But, I do not see why I would use npm in this instance? I'm not using import statements for d3 in the component.ts files, and it works ok anyway. Maybe I'm missing something here?

• javascript
• d3.js
• typescript
• angular
• npm

• 1 d3 is defined in the global scope in d3.min.js, so you don't need to import anything as long as the file is included in the page. Npm doesn't add any benefits here (except that it manages the dependencies for you) – WirelessKiwi Commented Jul 8, 2016 at 15:27
• And if I wasn't using the global scope... would it work. I couldn't get to it work using imports – Drenai Commented Jul 8, 2016 at 15:43
• I guess it would but I'm not familiar with typesccripts projects. I'm afraid I can't help you more on this. – WirelessKiwi Commented Jul 11, 2016 at 8:01
• import * as d3 from 'd3'; works, but I used the angular2-seed setup. Had to npm install [email protected], as v4 has problems with import. The systemjs needs to be configured in angular 2 quickstart, but angular2-seed imports automatically – Drenai Commented Jul 11, 2016 at 8:47

1 Answer 1

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)
• Now you can use 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-scale Install 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 instead of --save-dev depending on your use case.)
• For convenience, you can now bundle these modules in a barrel module d3-bundle.ts

e.g.

// d3-bundle.ts    
export * from 'd3-selection';
export * from 'd3-transition';
export * from 'd3-shape';
export * from 'd3-scale';

• Import from the bundle (using the appropriate relative path) to create a singleton D3 service i.e. 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.