1

I have the code from here https://gist.github.com/d3noob/013054e8d7807dff76247b81b0e29030 working in vanilla javascript, but I am struggling to get a Sankey diagram working in my Angular 2 project (built using Angular CLI) which uses Typescript.

D3 works fine in the project, but even with the the Sankey plugin and typings installed from npm:

Plugin: https://www.npmjs.com/package/d3-sankey

Typings: https://www.npmjs.com/package/@types/d3-sankey

I get errors on:

const sankey = d3.sankey()
.nodeWidth(20)
.nodePadding(40)
.size([width, height])

const path = sankey.link()

and 

sankey
    .nodes(graph.nodes)
    .links(graph.links)
    .layout(32)

as neither .link() nor .layout() are recognised properties of sankey. Has anyone got a sankey diagram working using Typescript and Angularjs 2+? Any help would be appreciated.

Michael Dunbar
  • 33
  • 2
  • 9
  • I can't even find `d3.sankey()` after installing the types, how you do that? – John Jang Sep 27 '17 at 06:11
  • @John_J you need to install the plugin too – Michael Dunbar Oct 11 '17 at 12:50
  • 3
    Thank you @Michael ~ btw, I had the sankey chart worked these days, please ref my gist: https://gist.github.com/MagicJohnJang/3cde82004e632e66b0fc5c156a7c16e9 .In short: 1. Import d3-sankey with other name than `d3` (which has been used by D3.js). 2. Define the input (`nodes` and `links`) with specific types (as I show in my gist). – John Jang Oct 12 '17 at 07:09

1 Answers1

2

The d3-sankey plugin does not have a link function defined. You're using code that was meant for an older plugin, not the one that has been rolled into the d3 gitHub repository (d3-sankey).

Try referencing this example instead - it's using the same version of the plugin that you are: https://bl.ocks.org/mbostock/ca9a0bb7ba204d12974bca90acc507c0

Lecia
  • 29
  • 2
  • 2
    For anyone coming to this question in future, I can confirm the combination of Lecia and John_J's answers do work. I particularly recommend you view John_J's gist in the comments to my original question. – Michael Dunbar Oct 26 '17 at 12:25