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

问题描述

我使用 d3 sankey 实现时遇到的问题是，没有办法指定x轴为节点。我一直在通过源，并没有真正的干净的方式来指定x值在合理的规模（即，1-5，其中图表是5个节点宽）。我创造的东西，可以像教育的课程计划一样使用，所以x值将对应学期。假设我有一门课程，直到我大二的大二学年，这将是一个x的3（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.

我注意到，实际的sankey图表中的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.

computeNodeBreadths <可以修改sankey.js中的code>函数以查找已分配给节点（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屋！