cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
TedPattison
Advisor

Adding D3 support to a custom visual project

All the Microsoft documentation and samples about adding D3 typed definition files to a custom visual project use the typings utility. Here is what the instructions are on the Power BI Visuals repo in GitHub:

 

# First, install D3 v3.5.5 because Power BI does not yet support D3 v4
npm install d3@3.5.5 --save

 

# Next, install typings utility
npm install typings -g

 

# Next, install typings files for D3
typings install --save --global dt~d3     <- Error as it attempts install D3 v4 typings file

 

# In the GitHub issues list for the repo, I found that workaround that works
typings install --save --global dt~d3#0.0.0+20160907005744

 

While you can get this to work, I think it is safe to say the typings utility is now being phased out in general node.js and npm development and developers are now standardizing on using the regular npm install command to install typed definition files from the Definitely Typed project. Another important concern is that soon you will no longer be able to sit at the cool kids table if you keep using th typings utility Smiley Wink

 

Here the steps that I think should start using to create a new custom visual project with support for D3 programming.

 

pbiviz new barchart
cd barchart
npm install d3@3 --save
npm install @types/d3@3 --save

 

Once you have one that, modify the externalJS setting in pbiviz.json file

"externalJS": [
  "node_modules/d3/d3.js"
]

 

Then update the files section of the tsconfig.json file.
"files": [
    ".api/v1.5.0/PowerBI-visuals.d.ts",
    "src/visual.ts",
    "node_modules/@types/d3/index.d.ts"

]

 

It use to take me a while to configure all this and now it takes less than a minute.

3 REPLIES 3
Community Support Team
Community Support Team

Re: Adding D3 support to a custom visual project

@TedPattison,

 

Thanks for sharing the information. You could also take a look at this thread to add an external library.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
vizdata Frequent Visitor
Frequent Visitor

Re: Adding D3 support to a custom visual project

Thanks for sharing. Last month your instructions worked like a charm. This month, npm install d3@3 --save throws an error although npm install @types/d3@3 --save works fine. Even when I copy across the d3 folder I created this way to my new folder, it won't work. I wonder if support has been removed for d3 version 3 with npm, and whether you could update your excellent instructions accordingly.

Moderator v-viig
Moderator

Re: Adding D3 support to a custom visual project

Installation of d3@3 works well for me.

What npm and nodejs versions do you use? What kind of error have you faced?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com