Strange link layout gliches

andrey-zakharov commented 6 years ago

Take this data:

{
  "nodes": [ 
    { "id": "a" }, { "id": "b" }, { "id": "c" }, {"id": "d" }, {"id": "e" }, {"id": "f" }
  ],
  "links": [
    { "source": "a", "target": "b", "value": 1 },
    { "source": "a", "target": "c", "value": 1000 }, 
    { "source": "b", "target": "d", "value": 1 },
    { "source": "c", "target": "d", "value": 1000 },
    { "source": "d", "target": "e", "value": 1 },
    { "source": "e", "target": "f", "value": 1 }
  ]
}

put into https://ricklupton.github.io/d3-sankey-diagram/

Observe strange layout if links from "a" to "c" (largest one)

andrey-zakharov commented 6 years ago

it comes from too wide stroke width line relative to line length (by horizontal or sometimes vertical), as it drawed by SVG.

ricklupton commented 5 years ago

Thanks for the example to reproduce! You're right about the problem. Perhaps we need to check for this happening and change to a different layout method if there isn't enough space to draw the link.

(The link outline is calculated by d3-sankey-diagram directly and filled -- it's not the SVG stroke-width that's causing the problem)

ricklupton / d3-sankey-diagram

Strange link layout gliches #14