D3 V4 has been out for some time now, but there is not a straightforward way to get it working inside a pbiviz. Instead, most Power BI examples and documentation show you how to work with D3 version 3.
The goal is to get D3 V4 working in my custom visual with types. Using the following steps (described below), I was able to get D3 V4 working without types. I believe the ultimate solution involves using a js bundler such as Rollup or Webpack. I am less familiar with these tools so I was hoping someone could point me in the right direction to get types working.
Here is what I've done so far
//STEP 1 - install d3 and types
npm install d3 @types/d3 --save
//STEP 2 - Include d3 in pbiviz.json
"externalJS": [
"node_modules/d3/build/d3.min.js",
"node_modules/powerbi-visuals-utils/dataviewutils/lib/index.js"
}
//STEP 3 - reference d3 in visual.ts by declaring a gloabal variable
let d3 = (<any>window).d3;
module powerbi.extensibility.visual {
"use strict"
export class Visual implements IVisual {
...
}
}
Although this solution works for using d3, I lose my types as soon when I declare d3 as a global variable in visual.ts (step 3). If I comment out this variable, i get my types back, but then my visual doesn't compile. So I've been switching back and forth by commenting/uncommenting that global d3 variable reference to get my types working during development.
My big question is this: how can I get d3 v4 to work here, without me needing to reference it as a global variable? Would rollup/webpack help for this? If so, how do I implement this?
Thanks!
