javascript – d3 sankey图表 – 沿x轴手动定位节点

我使用 d3 sankey实现的问题是,没有办法指定节点在x轴上的位置.我一直在通过源代码,并没有真正的“干净”的方式来以合理的比例来指定x值(即图1-5是5个节点宽).我正在创造一些可以像课程计划者一样使用教育的东西,所以x值将与学期相符.假设我有一门课程,直到我大二学年才能上课,这将是一个三分之一(1/2是新生,3/4大二等).问题是,如果事先没有连接到这个课程,它总是在x的1,所以我想把它推到正确的两个空格.

我注意到,实际的sankey图表中的x值并不能反映出它的多少个节点,所以这很难做到.

我也碰到了this question,我意识到,默认情况下,图表不会让我放置一个节点.我没有任何问题调整sankey.js的例子来完成这个,但是我现在坚持要怎么做.

解决方法

这个有可能.看这个 JSFiddle.

可以修改sankey.js中的computeNodeBreadths函数,以查找已分配给节点(node.xPos)的显式x位置：

function computeNodeBreadths() {
    var remainingNodes = nodes,nextNodes,x = 0;

    while (remainingNodes.length) {
      nextNodes = [];
      remainingNodes.forEach(function(node) {

        if (node.xPos)
            node.x = node.xPos;
        else
            node.x = x;

        node.dx = nodeWidth;
        node.sourceLinks.forEach(function(link) {
          nextNodes.push(link.target);
        });
      });
      remainingNodes = nextNodes;
      ++x;
    }

    //
    moveSinksRight(x);
    scaleNodeBreadths((width - nodeWidth) / (x - 1));
  }

那么你需要做的就是在所需的节点上指定xPos.在上面的例子中,我已经在node2上设置了xPos = 1.请参阅JSfiddle示例中的getData()

... },{
        "node": 2,"name": "node2","xPos": 1
    },{ ...