Question

使用d3.js sankey图表，如何使链接从节点流出并从图中向下移动到底部或顶部？这需要链路中的90度转弯，并且它不能在节点处结束（或者至少不是图中的一个），并且表示流出建模系统的流量。

我希望它看起来像成品石油产品＆＃39;此diagram中的链接。

特别是我使用这个boilerplate，但更通用的答案很好我坚持使用哪种方法来实现这一点但是一旦我知道要使用什么以及如何使用使用它们我可以实现它。

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

Answer 1

下面的代码是我用来创建链接路径的函数，该路径在其右侧留下一个节点，水平短暂地向上弯曲，向上弯曲四分之一圆并退出图的上限。我很天真，因为解决方案与重写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链接流出图的底部？

1 个答案: