Using D3 v5 for developing custom visual

bhavesh-jadav — Tue, 04 Sep 2018 10:19:49 GMT

Hi there,

I am trying to use D3 v5 to develop custom visual but with no success.

I tried importing 'select' from 'D3-Selection' using following synatax

import { select } from 'd3-selection';

but I got the following error.

[ts] Cannot compile modules using option 'out' unless the '--module' flag is 'amd' or 'system'.

How can I use D3 v5 to create Power BI Custom visual? Also I was trying to import only needed D3 component rather than whole D3.

tsconfig.json file

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  },
  "files": [
    ".api/v2.1.0/PowerBI-visuals.d.ts",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
    "src/settings.ts",
    "src/visual.ts",
    "node_modules/@types/d3-selection/index.d.ts"
  ]
}

pbiviz.json file

{
  "visual": {
    "name": "test",
    "displayName": "Test",
    "guid": "test8563230F5E9C414D942A3CF4AD47F334",
    "visualClassName": "Visual",
    "version": "1.0.0",
    "description": "",
    "supportUrl": "",
    "gitHubUrl": ""
  },
  "apiVersion": "2.1.0",
  "author": {
    "name": "",
    "email": ""
  },
  "assets": {
    "icon": "assets/icon.png"
  },
  "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/d3-selection/dist/d3-selection.min.js"
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": "dependencies.json",
  "stringResources": []
}

package.json file

{
  "name": "visual",
  "dependencies": {
    "d3": "^5.7.0",
    "powerbi-visuals-utils-dataviewutils": "1.2.0"
  },
  "devDependencies": {
    "@types/d3": "^5.0.0"
  }
}

Re: Using D3 v5 for developing custom visual

mikorym — Tue, 04 Sep 2018 10:01:43 GMT

Hi @bhavesh-jadav

The most recent version of D3 that I know works within Power BI is 3.5; the tutorial is here: https://microsoft.github.io/PowerBI-visuals/docs/step-by-step-lab/adding-visual-elements/.

Perhaps someone from MS can confirm this or point to a 5.x resource.

Best regards

Phillip

Re: Using D3 v5 for developing custom visual

bhavesh-jadav — Fri, 12 Oct 2018 05:48:03 GMT

I found the steps to use v5 of D3 fro Power BI Custom visuals. See below link

https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/migrating-to-powerbi-visuals-tools-3-0/

topic Using D3 v5 for developing custom visual in Developer

Using D3 v5 for developing custom visual

Re: Using D3 v5 for developing custom visual

Re: Using D3 v5 for developing custom visual