d3 sankey 图表 - 沿 x 轴手动定位节点 [英] d3 sankey charts - manually position node along x axis

问题描述

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

A problem I have come across using the d3 sankey implementation is that there's no way to specify where on the x axis a node is. I've been poking through the source and there isn't really a "clean" way to specify the x value on a reasonable scale (ie, 1-5 where the chart is 5 nodes wide). I am creating something that can be used like a course planner for education, so the x value will correspond with the semester. Supposing I had a course I couldn't take until my sophomore year of college, this would be at an x of 3 (1/2 are freshman, 3/4 sophomore, etc). The problem is, if there is nothing that links to this course beforehand, it will always be at an x of 1, so I would like to push it to the right two spaces.

我注意到实际桑基图中的 x 值并不反映它有多少个节点，所以这有点难以做到.

I have noticed that the x value in the actual sankey chart does not reflect how many nodes across it is, so this is a bit difficult to do.

我也遇到过 这个问题，我意识到默认情况下图表不会让我定位节点.我在调整 sankey.js 示例以完成此操作时没有任何问题，但目前我不知道该怎么做.

I've also come across this question, and I realize that by default the chart will not let me position a node. I have no problems tweaking the sankey.js example to accomplish this, but I'm stuck as to how to do so, currently.

推荐答案

这是可能的.请参阅此 JSFiddle.

This is possible. See this JSFiddle.

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

The computeNodeBreadths function in sankey.js can be modified to look for an explicit x-position that has been assigned to a node (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():

Then all you need to do is specify xPos on the desired nodes. In the above example I've set xPos = 1 on node2. See getData() in the JSFiddle example:

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

这篇关于d3 sankey 图表 - 沿 x 轴手动定位节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！