> 1 nodeWidth creates angled circular link paths

[peteruithoven]

When a nodeWidth of more than 1 is used some circular link paths are drawn angled / rotated.

nodeWidth of 1

nodeWidth of 30

Example code: https://codesandbox.io/s/nodewidth-d3-sankey-diagram-phmpr

Copy of example code

import * as d3Base from "d3";
import * as sankey from "d3-sankey-diagram";

const d3 = {
  ...d3Base,
  ...sankey
};

var data = {
  nodes: [
    {
      id: "a",
      title: "a",
      direction: "r"
    },
    {
      id: "b",
      title: "b",
      direction: "r"
    },
    {
      id: "c",
      title: "c",
      direction: "r"
    }
  ],
  links: [
    {
      source: "a",
      target: "b",
      value: 1
    },
    {
      source: "b",
      target: "c",
      value: 1.2
    },
    {
      source: "c",
      target: "a",
      value: 0.2
    }
  ]
};

var svg = d3.select("svg");
var width = +svg.attr("width");
var height = +svg.attr("height");
var margin = { top: 10, left: 50, bottom: 10, right: 50 };

var layout = d3
  .sankey()
  .nodeWidth(30)
  .extent([
    [margin.left, margin.top],
    [width - margin.left - margin.right, height - margin.top - margin.bottom]
  ]);

// Render
var color = d3.scaleOrdinal(d3.schemeCategory10);
var diagram = d3
  .sankeyDiagram()
  .linkMinWidth(() => 0.1)
  .linkColor(d => color(d.type));

svg.datum(layout(data)).call(diagram);