3

I have some javascript code which uses d3 sankey plugin for creating a chart. In my new project, I need to reuse the same code, but the new project is in typescript. I am looking for a DefinitelyTyped file for the plugin. I browsed through https://github.com/DefinitelyTyped/DefinitelyTyped, but couldn't find it.

Is there any other location where I can get this file from?

Sankey plugin link: https://github.com/d3/d3-sankey

Also, without a d.ts file for this plugin, is there a way to access it through typescript?

The code in d3 plugin looks something like this:

d3.sankey = function () {

// Rest of the code goes here

}

The way I use it in javascript is as below:

d3.sankey().nodeWidth(30).size([100,100]);

Would appreciate any help or guidance.

Thanks!

AgentHunt
  • 669
  • 3
  • 11
  • 28

2 Answers2

3

As a heads-up, I have just submitted a Pull Request #16051 to DefinitelyTyped which contains TS definitions for d3-sankey.

Once they are merged, they will be published as per standard process to npm/@types. I.e. npm install --save-dev @types/d3-sankey will do.

IMPORTANT: When I wrote them up, I noticed that the current API documentation in the d3-sankey repo appears to be in some need of rectification (e.g. missing methods, mentioning of accessor functions, which are not used in the code base)

When I have a second, I will file an issue there/submit a PR.

UPDATE (2017-05-01):

The "official" TypeScript definitions for d3-sankey are now available (see npm @types/d3-sankey). Simply use them with npm as indicated above.

The PR to update the actual API documentation of d3-sankey to reflect the source code is still awaiting a merge here.

tomwanzek
  • 1,066
  • 11
  • 11
0

You need to expand the definition of the d3 type to include the sankey() method and the methods it accepts.

At the absolute minimum, you need to extend the d3 module with a declaration file to make clear that d3 has been extended with the d3-sankey module. You do so by creating a definition file that you place within the @types directly with the following contents:

declare module 'd3' {
    export function sankey(...args[]) : any;
}

This tells TS that there is a d3 module, and that it exports the function listed. If the d3 module already exists, it extends that module.

So you can then import the d3 service and use it:

import dd3 = require('d3');
dd3.sankey();

If you want to expand on the type file, you instead write the definition file as so:

declare module 'd3' {
    interface ISankey {
        nodeWidth() : number;
        nodeWidth(width : number|{(arg: number) : number}) : void;
        // Add Other d3.sankey Methods Here
    }
    export function sankey() : ISankey;    
}
Rich Seviora
  • 1,789
  • 12
  • 16
  • I tried creating the file with declaration and placed it in my @types directory, along with other definition files for d3, jquery etc. However, it seems my application is unable to load the definition. i.e. it cannot find the sankey() function. Does the index.d.ts files for d3 need to be updated as well? I don't want to update that or sankey.js since these are external files. Also, I noticed the other type definitions folders have index.d.ts, package.json and types-metadata.json. Do I need a similar structure? – AgentHunt Feb 23 '17 at 18:37
  • No; those other files (`index.d.ts`, `package.json`, etc) exist because they're being delivered as npm modules. When you import d3, how do you do it? I noticed that if I did `import d3 = require('d3');` it wouldn't resolve, but changing the imported variable to `dd3` worked fine. – Rich Seviora Feb 23 '17 at 18:45
  • I imported the way you indicated (dd3). Does it matter what I name the file as? I tried index.d.ts/sankey.d.ts. I am not sure if the placement of the file matters. I placed it in the root of @types folder as well as under @types\d3 folder. I assumed, as long as the filename ends with 'd.ts', it should be loaded. Also, sankey.js needs to be referenced in the html. correct? – AgentHunt Feb 23 '17 at 19:25
  • Forgot to mention, dd3 does resolve all other d3 members. – AgentHunt Feb 23 '17 at 19:29
  • Hmm. Can you include your `tsconfig.json`, and locations of this file plus your other definition files? It should have picked it up. – Rich Seviora Feb 25 '17 at 22:08
  • Ok declaring the module worked. But I did need to add d3.js to my project as well. Thanks! – AgentHunt Mar 27 '17 at 18:08