topic Adding D3 support to a custom visual project in Developer

Adding D3 support to a custom visual project

TedPattison — Wed, 01 Mar 2017 19:34:00 GMT

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 😉

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.

Re: Adding D3 support to a custom visual project

v-chuncz-msft — Fri, 03 Mar 2017 03:27:36 GMT

@TedPattison,

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

Re: Adding D3 support to a custom visual project

vizdata — Fri, 17 Nov 2017 15:14:45 GMT

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.

Re: Adding D3 support to a custom visual project

v-viig — Tue, 21 Nov 2017 14:37:08 GMT

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