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 (eg 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!

Answer 1

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.

Answer 2

The answer of tom ( https://stackoverflow.com/a/40315607/7094192 ) should help you in enabling D3 v4 with Power BI custom visuals. The Power BI custom visual API documentation provides some guidance in using an external library together with your Power BI custom visual: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md . Adding a reference to index.d.ts in the tsconfig.json file should be enough.

By default Power BI injects D3 v3.5.5 to be used by custom visuals and in that case installing only the typings would be enough: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/Typings.md But of course this can be changed in the future.

UPDATE December 4th, 2016 :

Finally had some time to try it myself and I got d3js v4 working with Power BI. I don't; believe it is the complete correct way (too many manual changes), but it works :-). There are the steps I executed:

1. I used rollup with an input script ( custom.d3.js ) with all the d3js modules needed (here only d3.version ):

    export { version } from './node_modules/d3/build/package'; 

2. Created a iife version via rollup.config.js :

    import nodeResolve from 'rollup-plugin-node-resolve' export default { entry: 'custom.d3.js', dest: 'external/d3.js', format: 'iife', moduleName: 'd3', plugins: [ nodeResolve({jsnext: true}) ] } 

3. Create custom d3js v4 file ( d3.js ) via rollup -c

4. Manually edited the d3.js file

   • add var d3; at the top
   • replace all exports with d3
   • change the last line of the file to })(d3 || (d3 = {}));

These steps will create a workable js file that can be included in the output inline script Power BI can handle via adding a reference in the tsconfig.json file.

For the intellisense I used the new typings @tom was talking via npm install @types/d3 --save-dev (depending on the modules you are using). To enable the intellisense in the visual.ts file I added /// <reference types="d3" /> just after the module powerbi.extensibility.visual { line.

The biggest drawback is of course the manual step 4, but I cannot find a way to eliminate that (yet). Maybe someone with more experience with rollup can help.

Thanks, JP

Answer 3

From the compiler output it looks like the typings file is invalid.

I took a quick look at the repository for V4 and it says that it was made for typoscript 2.+. I don't know wether power BI support this yet as i'm not really familiar with the software but it might be worth looking into. I'd look into this first, as the compiler 's trying to tell you that the syntax in the .d.ts file isn't even close to valid.

I took a look at typescript for power BI and it apparently uses the tsconfig.json file to determine which files to build and in which order, so that would be a good place to start looking as well. It might be that you are referencing files that have not been loaded at that point.

Good luck and if you get some new information it might be worth editing your question for some more accurate help. ;)