How to use the d3js v4 typings standalone?

[niklas-dahl]

This Project looks great and once it is compatibile with ng 2.0 I will defenitly use it,
but for now I would really like to install the d3 typings for d3 version 4.

I'm using typescript 2 and as far as I understand your comment on DefinitelyTyped/DefinitelyTyped#9936 I should be able to use them today.
But I dont get how..

I tried:
npm i @types/d3 this installs the typings for d3 version 3
npm i @types/d3-types-2.0 npm ERR!
npm i @types/d3@types-2.0 npm ERR!
npm i @types/d3@4.0 npm ERR!

Thanks for all your work on the typings 👍

[tomwanzek]

@niklas-dahl Thanks. I opened a separate issue to update the dependencies to support ng2 2.0.0 see #9 .
Fingers crossed, it's quick. But I am checking out a migration to angular-cli beta.14 out for other projects first today.

As for your question related to using the typings for D3v4 here is a short version of what is shining through in the longer tracking issue on DT you referenced above:

(1) Yes, the definitions pulled from @types/d3 are still for D3 3.x. There is no single definitions file for the D3 Standard Bundle v4 in DT/types-2.0 and @types yet. This is due to a structural limitation in the DT/types-2.0 branch, which does not yet support parallel versions. This is a known issue with the TS team building the types-publisher linking DT and @types. We cannot kill the legacy version due to the dependencies to it from other libraries in DT.

(2) All the D3 modules which form part of the D3 Standard Bundle are, however, obtainable from @types. E.g. npm install @types/d3-selection --save will get you the latest v4 definitions for d3-selection. So you can import them individually and bundle them similar to how this d3-ng2-service does it in bundle-d3.ts. You can also just use a subset, to fit your tailored need.

If you require the use of a d3 global for vanilla scripts, things are still a little tricky. You can essentially follow the approach under (2), with a couple of changes:

• Rather than building a .ts file use a .d.ts file (i.e. you creating your own bundle definition in the project
• Add the following to the so created bundle definitions file: export as namespace d3;

The last part will ensure the global becomes available. You can consume it in a TS file by using

\\\ <reference types="..." />

with the appropriate path to the bundle definitions file. This would be used instead of an import statement.

As I finalize the transition of issues/open items from the repo in which the new definitions were developed to DT, I will restructure the main issue thread you found. For some open items I will post a temporary work around, as long as there are still dependencies.

Hope this helps in the meantime. I will cc you, when I update the DT comments.

In the interim, if you have questions related to the types more general rather than specific to this service, it may be easier to post them on DT (use the main issue for now). I'm sure you are not the only one who ran into the current structural limitations.

Cheers. 😄

[niklas-dahl]

wow, thanks for your detailed answer.

[tomwanzek]

Not to worry. PS. you're good to use it with ng2 v2.0.0 now. All (peer)-dependencies are updated in the latest release 1.1.3. Will convert the demo project linked in the README next (but that is predicated on all going well with the latest angular-cli release...)