Angular2 / Typescript + D3v4 - manually include captions?

Question

I am trying to start D3 using my Angular2 application.
However, it seems that there is currently a problem with the new D3v4 and the available typing file, i.e. trying to use new methods such as scaleLinear() instead of no longer using scale.linear() will result in an error
Property 'scaleLinear' does not exist on type 'typeof d3'.

Since tomwanzek seems to already exist and is trying to create new definitions at https://github.com/tomwanzek/d3-v4-definitelytyped I was wondering if there is a way to manually include existing typing files in an Angular2 project?

Answer 1

In response to Arlo's answer, let me tell you a brief story and the current answer. I created a repo https://github.com/tomwanzek/d3-v4-definitelytyped to develop new definitions of D3 version 4 of TypeScript, when D3 v4 was not yet final and TypeScript 2 was just on the horizon. The latter was a major factor since it changed the way of writing definitions and can be acquired, i.e. @types.

With a few nods to the collaborators listed in the repo, we completed the definitions and moved them to DefinitelyTyped . They are currently actively supported in type-2.0 branches. This is a branch published before npm @types .

Some confusion that you may have seen is related to the fact that the individual definitions of the module are D3 v4 , for example. d3-selection, have been available through npm install --save @types/d3-selection quite some time. However, until yesterday, the definition obtained by npm install --save @types/d3 still removed the old definition of D3 v3.5.x.

At the moment, definitions of standard D3 v4 bundles are available from npm install --save @types/d3 (legacy version definitions for D3 version 3.5 can still be pulled out of @types by purchasing version 3.5 if necessary)

Regarding the use of definitions with imports :

• Do not install or use the standard d3 kit from ('d3' and '@ types / d3', respectively), at the same time installing the D3 modules that are already contained in it separately, for example. 'd3-hierarchy' and '@ types / d3-hierarchy'.

As for Angular 2, yes, d3-ng2-service or something similar is one way. I am sure that there can be improvements in it, it was launched for rapid prototyping in combination with angular-cli.

Answer 2

I don't know the @ types / d3v4 sentences about drewmoore, but @ types / d3-MODULE works, although it does require Typescript 2.0 , as mentioned.

Install the @types package for each used d3 module, for example, the axis will be:

 npm install --save-dev @types/d3-axis 

I think they are taken from: https://github.com/tomwanzek/d3-v4-definitelytyped Check the status / availability of each D3 module: Problem 56

Apparently, npm @types will replace typings and tsd in the future: the future of declaration files

Answer 3

based on a response from AMB0027

 import * as d3 from "d3"; import * as d3Hierarchy from "d3-hierarchy"; d3Hierarchy.hierarchy(blah); 

Workaround for cleaner code

create d3-bundle.ts file in your project with

 export * from "d3-selection" export * from "d3-heirachy" 

in ts with d3 - now you can do;

 import * as d3 from "./d3-bundle" d3.hierarchy(blah) 

To avoid the "scaleLinear" error

 npm install @types/d3-axis 

and add

 export * from "d3-axis" 

to your d3-bundle.ts

Note that there are problems associated with this on TypeScript https://github.com/Microsoft/TypeScript/issues/9681

Answer 4

I'm also not sure what you think. This does not seem to work for me.

I have two suggestions to continue.

Best answer

The first is the addition to Arlo's answer. When I originally wrote this comment, I could not get Arlo to respond to work. Now I understand why. I tried to use the d3-hierarchy package. Therefore, the installation:

 npm install d3 --save npm install @types/d3 --save-dev npm install @types/d3-hierarchy --save-dev 

And then using the modules as follows:

 import * as d3 from "d3"; d3.hierarchy(blah); 

And then he will complain that he did not know about the d3.hierarchy member. Now I understand that I must use this object (I do not know why it has not been registered before). So updated:

 import * as d3 from "d3"; import * as d3Hierarchy from "d3-hierarchy"; d3Hierarchy.hierarchy(blah); 

Original answer

It seems that the only answer I have found so far is the d3-ng2-service module, located by reference. This is not a great option, but it allows you to use d3v4 in your angular 2 project.

The following is an excerpt from readme on how to use it in an angular 2 component:

 import { Component, OnInit, ElementRef } from '@angular/core'; import { D3Service, D3, Selection } from 'd3-ng2-service'; // <-- import the D3 Service, the type alias for the d3 variable and the Selection interface @Component({ selector: 'app-test-d3', templateUrl: 'test-d3.component.html', styleUrls: ['test-d33.component.css'] }) export class TestD3Component implements OnInit { private d3: D3; // <-- Define the private member which will hold the d3 reference private parentNativeElement: any; constructor(element: ElementRef, d3Service: D3Service) { // <-- pass the D3 Service into the constructor this.d3 = d3Service.getD3(); // <-- obtain the d3 object from the D3 Service this.parentNativeElement = element.nativeElement; } ngOnInit() { let d3 = this.d3; // <-- for convenience use a block scope variable let d3ParentElement: Selection<any, any, any, any>; // <-- Use the Selection interface (very basic here for illustration only) // ... if (this.parentNativeElement !== null) { d3ParentElement = d3.select(this.parentNativeElement); // <-- use the D3 select method // Do more D3 things } } }