Geek Answers Handbook

Is there any use to installing d3.js via npm for an Angular 2 TypeScript project?

I have an Angular 2 project (this is a Quick Start project for simplicity) and I am importing a version of d3.js 4. There is no TypeScript definition with d3, as this is only javascript.

In index.html, I add lib:

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

In TypeScript app.component.ts, I refer to 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 recognize d3, so I set the identifiers from DefinitelyTyped - then the IDE recognizes d3, and I get code completion, etc.:

typings install dt~d3 --save --global

Now I tried a second project, but the route has gone npm, npm install --save d3and I can refer to d3.js through node_modules in the index.html, using

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

, npm ? d3 component.ts, . , - ?

+4
1

import D3 4 ( TypeScript 2):

1 ( D3)

  • npm install --save d3 ( D3 v4)
  • npm install --save-dev @types/d3 ( D3 v4). --save, , Angular 2, )
  • , import * as d3 from 'd3', . , D3- .

2 ( , )

  • npm install --save d3-selection d3-transition d3-shape d3-scale , .
  • npm install --save-dev @types/d3-selection @types/d3-transition @types/d3-shape @types/d3-scale ( . --save --save-dev .)
  • d3-bundle.ts

.

// d3-bundle.ts    
export * from 'd3-selection';
export * from 'd3-transition';
export * from 'd3-shape';
export * from 'd3-scale';
  • ( ) D3, .. import * as d3 from './d3-bundle'

2 , d3-ng2-service. , D3, . , .

, angular-cli , Webpack 2 / .

+7

More articles:


All Articles