d3 / d3-sankey

Visualize flow between nodes in a directed acyclic network.

Home Page:https://observablehq.com/collection/@d3/d3-sankey

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

d.y0 and d.y1 go NaN with the README example

piglovesyou opened this issue · comments

The code below generates d.y0 of nodes as NaN.

From my quick debugging, I found the variable ky below goes Infinity, which makes subsequent calculations mess. I didn't find the root cause.

Code:

  const size = { width: 700, height: 600 };
  const svg = d3.select('body').append('svg').attr('width', size.width).attr('height', size.height);
  const sankey = d3.sankey().extent([[0, 0], [size.width, size.height]]);

  const nodes = [
    { 'id': 'Alice' },
    { 'id': 'Bob' },
    { 'id': 'Carol' }
  ];

  const links = [
    { 'source': 0, 'target': 1 }, // Alice → Bob
    { 'source': 1, 'target': 2 } // Bob → Carol
  ];

  const graph = sankey({ nodes, links });

  console.log(graph.nodes[0].y0, graph.nodes[0].y1); // → NaN, NaN

Suspicious line:

const ky = min(columns, c => (y1 - y0 - (c.length - 1) * py) / sum(c, value));

Versions:

    <script src="https://unpkg.com/d3@5.16.0/dist/d3.min.js"></script>
    <script src="https://unpkg.com/d3-fetch@1.2.0/dist/d3-fetch.min.js"></script>
    <script src="https://unpkg.com/d3-array@1.2.4/dist/d3-array.min.js"></script>
    <script src="https://unpkg.com/d3-collection@1.0.7/dist/d3-collection.min.js"></script>
    <script src="https://unpkg.com/d3-path@1.0.9/dist/d3-path.min.js"></script>
    <script src="https://unpkg.com/d3-shape@1.3.7/dist/d3-shape.min.js"></script>
    <script src="https://unpkg.com/d3-sankey@0.12.3/dist/d3-sankey.min.js"></script>

It turned out I missed this line in README. Problem has been solved after I provide it.

Each link must be an object with the following properties:
link.value