Trouble Installing d3 Typings for Power BI Custom Visual Development

5
votes

I'm having trouble installing d3 typings. I followed Microsoft's instructions at https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/Typings.md as well as what Sachin Patney does in his video at https://www.youtube.com/watch?v=_2-yMGtEv2w.

Running "npm install typings -g" appears to work fine.

Running "typings install --save --global dt~d3" or "typings i dt~d3 -G" both yield this error: "typings ERR! message Attempted to compile "d3" as a global module, but it looks like an external module. You'll need to remove the global option to continue."

If I remove the global option, it adds the typings info in my visual's folder using a "modules" folder in the path instead of a "globals" folder (i.e., MyVisual|typings|modules|d3 instead of MyVisual|typings|globals|d3). Intellisense also doesn't work for d3.

Any idea why I can't install d3 typings globally?

2
d3.jspowerbitypescript-typings

2 Answers

7
votes

Although @FabioEnne's answer did solve my problem regarding global install and intellisense, I still ran into other issues related to the initial cause of that problem. But I think I found the fix...

According to Jon Gallant:

The Power BI team just released v1.2 of the Custom Visuals SDK. With this version you now need to reference d3 v3.5.5 yourself. d3 v4 does not work yet. I’m working with the team to get a v4 compat and sample together, but for now you can only use v3.5.5.

(@FabioEnne's solution added v4.4.0 onto my system.)

Jon provides the solution to this problem at his site: http://blog.jongallant.com/2016/11/pbiviz-12-d3-35-reference/. (He included a video.)

This gist of Jon's solution is:

Install Typings:

npm i -g typings

Add d3 v3.5.5:

npm i [email protected] --save

Add d3 typing: 

typings install d3=github:DefinitelyTyped/DefinitelyTyped/d3/d3.d.ts#6e2f2280ef16ef277049d0ce8583af167d586c59 --global --save

Add files to tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  },
  "files": [
    ".api/v1.3.0/PowerBI-visuals.d.ts",
    "typings/index.d.ts",
    "node_modules/d3/d3.min.js",
    "src/visual.ts"
  ]
}
4
votes

Right, I just had the same issues, do this and youl'll be fine: Manually delete all the contents inside the folder "Typings" Open Windows powershell and enter the following command:

npm install @types/d3

Open the tsconfig.json and modify it as follow:

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  },
  "files": [
    ".api/v1.3.0/PowerBI-visuals.d.ts",
    "node_modules/@types/d3/index.d.ts",
    "src/visual.ts"
  ]
}

In this way I was able to continue, let me know if it worked for you as well.