2

I am working on this example of d3 bi-directional sankey chart. http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779

I have lately realized that the positioning of the childnodes of parent nodes in the last x-cordinate or the nodes at the right edge seems to align itself again at the x-cordinate near to the left edge of the svg container.

I need to resolve this and the childnodes should be aligned exactly below the parent node, not on the leftmost side of the svg. That means, we need to do something for the x-cordinate.

Following is the code which I am looking at:

  function computeNodeXPositions() {
var remainingNodes = nodes,
    nextNodes,
    x = 0,
    addToNextNodes = function (link) {
      if (nextNodes.indexOf(link.target) < 0 && link.target.x === this.x) {
        nextNodes.push(link.target);
      }
    },
    setValues = function (node) {
      node.x = x;
      node.width = nodeWidth;
      node.sourceLinks.forEach(addToNextNodes, node);
    };

while (remainingNodes.length) {
  nextNodes = [];
  remainingNodes.forEach(setValues);
  if (nextNodes.length) {
    remainingNodes = nextNodes;
  } else {
    remainingNodes = sourceAndTargetNodesWithSameX();
  }
  x += 1;
}

compressInXDirection(); 
scaleNodeXPositions();//This is the function we need to rework on, i  suppose
}

Following is the scaleNodeXPositions():

function scaleNodeXPositions() {
var minX = d3.min(nodes, function (node) { return node.x; }),
    maxX = d3.max(nodes, function (node) { return node.x; }) - minX;
xScaleFactor = (size[0] - nodeWidth) / maxX;

nodes.forEach(function (node) {
  node.x *= xScaleFactor;
});

} Here I am not able to figure out how the author is assigning the x-cordinates to the child nodes. If anyone has worked on the same problem before, all the help will be appreciated.

P.S. There are many questions on d3 sankey, however, this post is for d3 bi-directional sankey.

Omkar
  • 2,274
  • 6
  • 21
  • 34
  • Hi All, finally I found out the solution for this. You can set the node by modifying the variable x. Depending on the specific x-cordinates you need, try factoring x as 1, 2, 3 etc. and it will then in the function scaleNodeXPositions(), will automatically scale it. – Omkar Aug 23 '16 at 19:29
  • Hi can you show some code how did you manage to do that – Sracanis Jan 25 '17 at 08:44

0 Answers0