如何使 d3 sankey link 流出图表底部？

Question

使用 d3.js sankey 图，我怎样才能使 link 流出节点并离开图流向底部或顶部？这需要在 link 中转 90 度，并且它不会在节点处结束（或至少不是图中的一个节点），并表示流出建模系统。

我希望它看起来像 diagram 中的 'Finished Petroleum Products' link。

具体来说，我正在使用这个 boilerplate，但更通用的答案很好我可以实现。

更新：基本上，我想知道的是如何重写 d3 函数之一（哪个？）以使 link 以水平线终止（即与 SVG 天花板齐平或地板）而不是垂直线（即另一个节点的侧面）。

Answer 1

下面的代码是我用来创建 link 路径的函数，该路径在其右侧留下一个节点，短暂地水平移动，以四分之一圆向上弯曲并退出图表的天花板。我很天真，因为解决方案与重写 D3 函数无关..它只是学习如何使用 SVG path language.

  function drawPathLeavingDiagram(link) {
     var x0 = link.source.x + link.source.width,
         x1 = x0 + link.source.width / 4,
         x2 = x1 + link.source.width / 2,
         y0 = link.source.y + link.sourceY + link.thickness / 2,
         y1 = y0 - link.source.width / 2,
         rx = link.source.width / 2,
         ry = link.source.width / 2;
     return "M" + x0 + "," + y0 + "L" + x1 + "," + y0 + 
            "A" + rx + "," + ry + "," + 0 + "," + 0 + "," + 0 + "," + x2 + "," + y1 + 
            "V" + 0;
  }

如何使 d3 sankey link 流出图表底部？

How to make a d3 sankey link flow out the bottom of the diagram?

javascript

d3.js

sankey-diagram