Basic example on wiki does work - crashes with TypeError: Cannot read properties of undefined (reading 'length')

[bnovc]

Using the basic example on https://ricklupton.github.io/d3-sankey-diagram/, I get the following:

-sankey-diagram.umd.js:20584 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at titlePosition (d3-sankey-diagram.umd.js:20584:1)
at HTMLUnknownElement.eval (d3-sankey-diagram.umd.js:20467:1)
at Selection.eval [as each] (each.js:5:1)
at sankeyNode (d3-sankey-diagram.umd.js:20458:1)
at Selection.eval [as call] (call.js:4:1)
at updateNodes (d3-sankey-diagram.umd.js:20744:1)
at HTMLDivElement.eval (d3-sankey-diagram.umd.js:20711:1)
at Wn.each (d3.min.js:2:25626)
at exports (d3-sankey-diagram.umd.js:20674:1)
at Wn.call (d3.min.js:2:25196)
t

0.8.0 d3-sankey-diagram
7.8.4 d3

[ricklupton]

Hi @bnovc, can you be more specific about the code you are running to see this error? e.g. a simple self-contained example that illustrates the problem? Thanks

[nouman91]

@ricklupton I have been wrestling with similar issues for the past day and a half. Here is the simple setup:

  const sankeydata = {
      nodes: [
        { name: "Barry" },
        { name: "Frodo" },
        { name: "Elvis" },
        { name: "Sarah" },
        { name: "Alice" },
      ],
      links: [
        { source: 0, target: 2, value: 2 },
        { source: 1, target: 2, value: 2 },
        { source: 1, target: 3, value: 2 },
        { source: 0, target: 4, value: 2 },
        { source: 2, target: 3, value: 2 },
        { source: 2, target: 4, value: 2 },
        { source: 3, target: 4, value: 4 },
      ],
  };

var layout = sankey()
          .extent([[20, 10], [width - 20, height - 10]]);
var diagram = sankeyDiagram()
svg.datum(layout(sankeydata)).call(diagram)

Here is the error that I get:

ndle.js:8724 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at titlePosition (d3-sankey-diagram.umd.js:20571:18)
    at SVGGElement.eval (d3-sankey-diagram.umd.js:20454:24)
    at Selection.__WEBPACK_DEFAULT_EXPORT__ [as each] (each.js:9:37)
    at sankeyNode (d3-sankey-diagram.umd.js:20445:15)
    at Selection.__WEBPACK_DEFAULT_EXPORT__ [as call] (call.js:8:12)
    at updateNodes (d3-sankey-diagram.umd.js:20724:10)
    at SVGSVGElement.eval (d3-sankey-diagram.umd.js:20698:7)
 

I have simple code setup with webpack dev server, nothing too fancy. But I can't seem to figure out why is this happening. So far I have tried with different data sets but nothing works.