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

Question

我使用d3 sankey实现遇到的一个问题是没有办法在x轴上指定节点的位置.我一直在寻找源代码,并没有真正的"干净"方式来以合理的比例指定x值(即,图表为5个节点宽度的1-5).我正在创建一些可以像课程计划器一样用于教育的东西,因此x值将与学期相对应.假设我有一门课程,直到大二二年级才能参加,这将是x的3(1/2是新生,3/4大二等).问题是,如果事先没有任何东西链接到这个课程,它总是在x为1,所以我想将它推到正确的两个空格.

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

我也遇到过这个问题,我意识到默认情况下图表不会让我定位一个节点.我没有问题调整sankey.js来实现这一目标,但我现在仍然坚持如何这样做.

Answer 1

这个有可能.看到这个JSFiddle.

computeNodeBreadths可以修改sankey.js中的函数以查找已分配给节点(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
    }, { ...