Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now

Reply
tylersbrown01
Frequent Visitor

Setting up D3 V4 with Custom Visuals and Types

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!

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

There's no need to use module bundler.

The solution is:

  1. Remove let d3 = (<any>window).d3; from TypeScript code.
  2. Instead you should create a new file "d3Injector.js" (you can call it as you want).
  3. Put var d3 = window.d3; into created file
  4. Include d3Injector.js into externlaJS property of pbiviz.json right after "node_modules/d3/build/d3.min.js"

 

Please let me know if that works for you as well.

  

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

5 REPLIES 5
v-viig
Community Champion
Community Champion

There's no need to use module bundler.

The solution is:

  1. Remove let d3 = (<any>window).d3; from TypeScript code.
  2. Instead you should create a new file "d3Injector.js" (you can call it as you want).
  3. Put var d3 = window.d3; into created file
  4. Include d3Injector.js into externlaJS property of pbiviz.json right after "node_modules/d3/build/d3.min.js"

 

Please let me know if that works for you as well.

  

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Wow, thank you, it works! This is great - there's a lot of people that don't think it's possible to use d3 v4 with Power BI Custom Visuals. I will spread the word! 

 

One small issue - it seems power bi custom visuals work on an older version of typescript. Do to this - I had to disable a couple methods in the d3 geojson @types file to solve this error. I don't use geojson so it's not a big deal for me but it might be for other people. 

error  TYPESCRIPT  C:/repos/visuals/pbiviz/simpleLine/node_modules/@types/geojson/index.d.ts : (164,21) Generic type 'Feature<G, P, GeoJsonProperties>' requires 3 type argument(s).

Yes, you're correct PBIVIZ uses the old version of TypeScript.

We have a backlog item to update TypeScript version.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

 

 

Has the typescript version been updated yet? Or, what is the current version of typescript that the pbi library uses? 

We recently released the beta version of PBIVIZ Tools that uses the new TypeScript and webpack under the hood.

That means you can use D3 v4 and even v5 Smiley Happy

 

To find out more please visit this blog post.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
OCT PBI Update Carousel

Power BI Monthly Update - October 2024

Check out the October 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

October NL Carousel

Fabric Community Update - October 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors