CODEWITHSUNDEEP
typescriptd3.jspowerbi
Leo Espejo
Leo Espejo

Reputation: 21

Could not reference properly d3js (4.7) from TypeScript (2.4.2)

I am starting to develop my own custom visualization for Power BI. To do this I have prepared my development environment but I require to use D3js javascript framework from TypeScript. I already installed D3js in my environment using npm and typings but I could not reference correctly to use it from my TypeScript code.

D3js is installed using typings so D3js is installed as a typescript type. The index.d.ts file (from D3) contains a ts module declaration where the module is exported as a namespace, here start the problem, the namespace declaration is marked as incorrect with the following message

Global module exports may only appear at top level

This is the actual code from index.d.ts file (from d3js)

    // Generated by typings
    // Source: 

    module 'd3' {
    // Type definitions for D3JS d3 standard bundle 4.7
    // Project: https://github.com/d3/d3
    // Definitions by: Tom Wanzek <https://github.com/tomwanzek>, Alex Ford <https://github.com/gustavderdrache>, Boris Yankov <https://github.com/borisyankov>
    // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

    export as namespace d3; //this is the line marked as incorrect

    export * from 'd3-array';
    export * from 'd3-axis';
    export * from 'd3-brush';
    export * from 'd3-chord';
    export * from 'd3-collection';
    export * from 'd3-color';
    export * from 'd3-dispatch';
    export * from 'd3-drag';
    export * from 'd3-dsv';
    export * from 'd3-ease';
    export * from 'd3-force';
    export * from 'd3-format';
    export * from 'd3-geo';
    export * from 'd3-hierarchy';
    export * from 'd3-interpolate';
    export * from 'd3-path';
    export * from 'd3-polygon';
    export * from 'd3-quadtree';
    export * from 'd3-queue';
    export * from 'd3-random';
    export * from 'd3-request';
    export * from 'd3-scale';
    export * from 'd3-selection';
    export * from 'd3-shape';
    export * from 'd3-time';
    export * from 'd3-time-format';
    export * from 'd3-timer';
    export * from 'd3-transition';
    export * from 'd3-voronoi';
    export * from 'd3-zoom';
}

}

Finally, I know that TypeScript has suffer a big change on version 1.5, <1.5 there were not namespaces but external modules maybe the D3js code is not tuned with the latest changes no TypeScript

How can I define a namespace from a module? Do I need to change the module for other object?

Upvotes: 1

Views: 240

Answers (1)

Leo Espejo
Leo Espejo

Reputation: 21

I've just found the solution. As I mentioned, since TypeScript 2.0 a lot of things has been changed against previous versions so we need a different way to install d3js

Instead of using typings (typings install --save dt~d3) we should the brand new @types this way:

npm install @types/d3

If you need a specific version that was my case in order to develop PBI custom visualizations from current source code you can include it this way: (to get version 3.5.34)

npm install @types/[email protected]

Upvotes: 1

Related Questions