D3条形图与链接栏(如sankey)

时间:2017-07-28 18:00:47

标签: javascript d3.js bar-chart nvd3.js

如何将bars与类似于sankey的平滑贝塞尔曲线相连?

nvd3 discrete bar chart w shaded area

sankey diagram

我的方法是使用nvd3 discrete bar chart自定义D3 Links api,但我正在努力。

这里是基础JSFiddle我正在尝试合并D3 Sankey plugin中的以下内容。我认为这是一个不错的方法。

sankey.link = function() {
    var curvature = .5;

    function link(d) {
      var x0 = d.source.x + d.source.dx,
          x1 = d.target.x,
          xi = d3.interpolateNumber(x0, x1),
          x2 = xi(curvature),
          x3 = xi(1 - curvature),
          y0 = d.source.y + d.sy + d.dy / 2,
          y1 = d.target.y + d.ty + d.dy / 2;
      return "M" + x0 + "," + y0
           + "C" + x2 + "," + y0
           + " " + x3 + "," + y1
           + " " + x1 + "," + y1;
    }

    link.curvature = function(_) {
      if (!arguments.length) return curvature;
      curvature = +_;
      return link;
    };

    return link;
  };

非常感谢任何帮助。

0 个答案:

没有答案