2

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

我希望它看起来像此图中的“成品石油产品”链接。

具体来说，我正在使用这个样板文件，但是更通用的答案很好，我坚持使用哪些方法来实现这一点，但是一旦我知道要使用什么以及如何使用它们，我就可以实现它。

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

4

1 回答 1

1

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

  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;
  }
于 2015-10-18T18:11:01.807 回答