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

Question

我在使用 d3 sankey 时遇到的一个问题实现是无法指定节点在 x 轴上的位置。我一直在浏览源代码，并没有真正“干净”的方法来以合理的比例指定 x 值(即 1-5，其中图表有 5 个节点宽)。我正在创建一些可以用作教育类(class)计划的东西，因此 x 值将与学期相对应。假设我有一门直到大学二年级才能上的类(class)，这将是 3 的 x(1/2 是新生，3/4 是二年级学生，等等)。问题是，如果事先没有任何链接到这门类(class)，它的 x 始终为 1，所以我想将它推到右边的两个空格。

我注意到实际桑基图中的 x 值并不能反射(reflect)它有多少个节点，所以这有点难以做到。

我也遇到过 this question ，我意识到默认情况下图表不会让我定位节点。我可以毫无问题地调整 sankey.js 示例来完成此操作，但目前我不知道如何操作。

Answer 1

这是可能的。看这个JSFiddle .

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

  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
    }, { ...