Typescript, D3 and powerBI: How do I get typescript to talk with D3 v4?

Question

I am trying to get D3 to work in powerBI so that I can create my own visual effects. I came to it from the end of D3 and am not familiar with typescript, powerBI or even with a terminal application (am on a poppy).

I have a D3 V3 using this: https://github.com/Svjard/d3-typescript . I placed the d3.d.ts file in the .tmp / precompile / src folder and referenced the file from visual.ts. I initially included data.ts and tsconfig.json, but I found that they were not needed.

But I would like to use D3 V4. There is a handler for D3 V4 thanks to a certain type: https://github.com/tomwanzek/d3-v4-definitelytyped . I ran npm install @types/d3-selection --saveand took the index.d.ts file, placed it in the .tmp / precompile / src folder, and re-referenced visual.js, but without joy. I renamed it d3.d.ts in case this helped: no. I used definitTyped package.json instead of the generated powerBI, but that didn't help either (and I suspect I misunderstood what this file is for!).

I get an error from a terminal application:

The code looks very different. This is the piece of file (v3) that works:

interface ID3Selectors {
    select: (selector: string) => ID3Selection;
    selectAll: (selector: string) => ID3Selection;
}

interface ID3Base extends ID3Selectors {

And here is the cropping of another file that does not work:

export type BaseType = Element | EnterElement | Window;

/**
 * A helper interface which covers arguments like NodeListOf<T> or HTMLCollectionOf<T>
 * argument types
 */
export interface ArrayLike<T> {
    length: number;
    item(index: number): T;
    [index: number]: T;
}

Does anyone know how I can typescript talk with D3 V4?

thank...

Emma

---

31 2016 . tsc -v CLI, 2.0.6.

, V4. , . -, :

(1) : https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md

(2) : https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/Typings.md

CLI npm . , Typings.md. "typings". tsconfig index.d.ts. d3.d.ts visuals.js.

. index.d.ts 3, , , d3.d.ts. , , , , , , , .

(3) Tom W ( ), d3, @types d3. import visuals.ts. , . d3 node_modules ( , !).

---

1 2016 . . . , /d 3.v4.js, npm. ?

(1) external/d3.v4.js @Jan - D3 v4, BI? , npm ? (var x = d3.scaleLinear();) - , , !

d3.v4.js external tsconfig.json. . Power BI , : "d3". ?

(2) npm @Tom, , . node_modules:

, npm install @types/d3 --save-dev node_modules . npm, (, power bi)? , Power BI .

d3.v4.js / d3. : " ". external/d3.v4.js, powerBI .tmp/precompile.

d3, powerbI tsconfig.json. , . , d3 .

, , Microsoft , , V4. . Microsoft , d3 d3 - npm. , d3!

Answer 1

D3 v4 https://github.com/tomwanzek/d3-v4-definitelytyped DefinitelyTyped ( types-2.0). , .

npm @types, "" TypeScript 2.

TypeScript 2 ( 1.9.x-dev). , , TS 1.8.x. , this, . , , this -typing , 1.8.x.

, powerBI , , , d3-selection, :

(1) npm install d3-selection --save

(2) npm install @types/d3-selection --save ( --save-dev, )

(3) , d3, TypeScript/ES6:

import * as d3Selection from 'd3-selection';

let svg = d3Selection.select('svg'); // or whatever you may be up to

: , @types/d3, D3 v4 Standard, . ( "" - D3 v3.5.x.)

, D3 script ( ), powerBI, , .

Answer 2

tom (fooobar.com/questions/1659047/...) D3 v4 Power BI. API- Power BI Power BI: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md. index.d.ts tsconfig.json .

Power BI D3 v3.5.5 , : https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/Typings.md , , .

4 2016 .:

, , d3js v4, Power BI. ; , ( ), :-). :

• rollup script (custom.d3.js) d3js ( d3.version):

  export {
    version
  } from './node_modules/d3/build/package';
  

• iife rollup.config.js:

  import nodeResolve from 'rollup-plugin-node-resolve'
  export default {
    entry: 'custom.d3.js',
    dest: 'external/d3.js',
    format: 'iife',
    moduleName: 'd3',
    plugins: [ nodeResolve({jsnext: true}) ]
  }
  

• d3js v4 (d3.js) rollup -c

• d3.js

  • var d3;
  • exports d3
  • })(d3 || (d3 = {}));

js , inline script Power BI tsconfig.json.

intellisense @tom npm install @types/d3 --save-dev ( ). intellisense visual.ts, /// <reference types="d3" /> module powerbi.extensibility.visual {.

, , 4, (). , - rollup .

, JP

Answer 3

.

V4, , typoscript 2.+. , BI-, , , , . , , .d.ts .

typescript power BI , -, tsconfig.json, , , . , , .

, , , .;)