Typescript, D3 and powerBI: How do i get typescript to talk to D3 v4?

Question

I'm trying to get D3 working in powerBI so I can create custom visuals. I come to it from the D3 end of things, and am not familiar with typescript, powerBI, or even terminal app (am on a mac).

I've got D3 V3 working using this: https://github.com/Svjard/d3-typescript. I put the d3.d.ts file into the .tmp/precompile/src folder and referenced the file from visual.ts. Initially I included data.ts and tsconfig.json but I've found these aren't needed.

But I'd like to use D3 V4. There's a handler for D3 V4 thanks to definitely typed: https://github.com/tomwanzek/d3-v4-definitelytyped. I ran npm install @types/d3-selection --save and took the index.d.ts file, put it in the .tmp/precompile/src folder and re-referenced visual.js but no joy. I renamed it d3.d.ts in case that helped: nope. I used the definitelyTyped package.json in place of the powerBI-generated one but that didn't help either (and I suspect misunderstands what the file is for!).

I get an error from the terminal app:

The code looks quite different. This is a snip of the (v3) file that works:

interface ID3Selectors {
    select: (selector: string) => ID3Selection;
    selectAll: (selector: string) => ID3Selection;
}

interface ID3Base extends ID3Selectors {

And here's a snip of the other file that doesn't work:

export type BaseType = Element | EnterElement | Window;

/**
 * A helper interface which covers arguments like NodeListOf<T> or HTMLCollectionOf<T>
 * argument types
 */
export interface ArrayLike<T> {
    length: number;
    item(index: number): T;
    [index: number]: T;
}

Does anyone know how I get typescript to talk to D3 V4?

thanks...

Emma

EDIT 31 October 2016 Thanks for answers. When I ran tsc -v in the CLI it said 2.0.6.

I've improved my situation but not got to V4. In case of use, this is what I've done and what's worked. There seemed to be three suggested methods:

(1) Following instructions here didn't work for me: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md

(2) Following instructions here did work: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/Typings.md

This involved using CLI and npm to install typings. Then adding typings to project folder, again with instructions from Typings.md link above. This created a folder called 'typings'. I updated tsconfig to load index.d.ts. I removed the reference to d3.d.ts from visuals.js.

The improvement is significant. This index.d.ts is version 3 like the last file I used, d3.d.ts. However unlike the last link it seems to support click events and probably other things I have yet to discover.

(3) I followed Tom W's instructions (for which thanks) and now have a d3-selection folder as well as a @types d3-selection folder. However, I couldn't get the import command to work in my visuals.ts file. I tried in various locations, within and outside of functions. i also copied the d3-selection folder from node_modules (not sure if i was meant to!).

EDIT 1 November 2016. Thanks again for help. I'm no further forward though. One of my key confusions is why both external/d3.v4.js and a npm installation are needed. Surely it's one or the other?

(1) The external/d3.v4.js method @Jan - have you got D3 v4 working in power BI? If so what was the exact npm code you ran and what else did you do? My test code is like so (var x = d3.scaleLinear();) - if you can compile successfully with this code please tell me how you did it!

I've included d3.v4.js into a folder called external and referenced it in tsconfig.json. This feels right. But power BI compilation within terminal fails, with the error message: Cannot find name 'd3'. Is there some other command needed?

(2) Mixing in the npm approach @Tom, thanks and I followed your instructions. Here's my node_modules:

Confusingly, npm install @types/d3 --save-dev created a new node_modules folder within an existing one. Once you've installed with npm, do you copy or move the folder (e.g. into the power bi project root)? I don't see how power BI can find these files.

I put the d3.v4.js file into external/ and referenced it with a reference link and types attribute set to d3. The compiler said: "invalid reference directive". I changed types to path and tried to set the path to external/d3.v4.js but powerBI seems hard coded to look in the .tmp/precompile folder.

I've got the d3 file loaded fine, though, removing the reference link and using powerBI's tsconfig.json instead. But I'm back to where I was. The file loads but d3 is not a recognised name.

It sounds as though if I wait till Microsoft has done their thing, I'll be able to use the typings method to get to V4. But it's just so annoying. Microsoft documentation says I can use d3 pre-loaded, or load my own copy of d3, without any npm at all. I must be missing a command to make the d3 namespace recognised!

This seems pointless if your objective is to publish to powerbi.com. — Mike Honey
Which part strikes you as pointless? To create a custom visual, I need to use D3 and I'd rather use V4 than V3. — emma
How do you plan to publish it? Presuming it is to powerbi.com, so you will likely have to comply with what they support. — Mike Honey
I briefly looked over your "edit update". One fundamental question regarding your use case: Do you use (1) import statements to load external modules (i.e. PowerBI supports some kind of module loading) or are you (2) using "globals" provided by external libraries like D3 in a vanilla script? — tomwanzek
Just to clarify: Please do duplicate the installation of D3 modules, which are already included in the Standard Bundle, if you use it. E.g. if you install d3 with @types/d3. Do not install d3-select and @types/d3-selection as well. For the modules already in the standard bundle, there is no need to duplicate, as the dependencies will be installed as per usual with npm. As you pointed out the key piece of information you need, is whether D3 will be used through module import or is loaded as a vanilla script from the external folder. Vanilla script = need d3 global. — tomwanzek

tomwanzek tomwanzek · Accepted Answer · 2016-10-29T02:55:51

The current definitions for D3 v4 have been completely migrated from https://github.com/tomwanzek/d3-v4-definitelytyped to DefinitelyTyped (currently in the types-2.0 branch). That's where they are now maintained and issues managed.

The branch publishes to the npm @types organization, which is the new "standard" mechanism for publishing and acquiring definition files with TypeScript 2.

Importantly, you will need TypeScript 2 (at least 1.9.x-dev) to use these definitions. Looking at the compiler error, I suspect you might compile with TS 1.8.x. My somewhat educated guess is based on the fact that it throws on this, the other errors are coincidental. The new definitions I wrote make use of this-typing for function contexts, which was not supported in 1.8.x.

So, setting powerBI aside for a second, say you want to install, import and use the d3-selection module, you would:

(1) Install the actual module npm install d3-selection --save

(2) Install the corresponding definition file npm install @types/d3-selection --save (or --save-dev if you are not writing a library for third party consumption)

(3) In the module, where you require d3-selection, you simply import in a standard TypeScript/ES6 manner:

import * as d3Selection from 'd3-selection';

let svg = d3Selection.select('svg'); // or whatever you may be up to

Note the following, the definitions installable from @types/d3 correspond to the D3 v4 Standard Bundle published by Mike Bostock. (Until yesterday, the "latest" version was still the D3 v3.5.x definition.)

Alternatively, if your use-case is based on using D3 in a vanilla script (rather than with module imports) to get it to work with powerBI, then let me know and I can provide additional guidance.

Typescript, D3 and powerBI: How do i get typescript to talk to D3 v4?

3 Answers