How to plot a horizonal sugiyama graph

[seahurt]

I am tring to plot a horizontally placed graph, but got a little problem.

Below is the original graph from https://codepen.io/brinkbot/pen/oNQwNRv

After swipe the x and y by following code(change from line 144):

var { height, width } = layout(graph);



function TransNode(node){
  console.log("transform", node.data)
  let tmp = node.ux;
  node.ux = node.uy;
  node.uy = tmp;
}

function TransGraph(g){
  let tmp = width;
  width = height;
  height = tmp;
  
  for (let node of g.nodes()){
    TransNode(node);
  }
  for (let link of g.links()){
    let points = [];
    points.push([link.source.ux, link.source.uy]);
    points.push([link.target.ux, link.target.uy]);
    link.points = points;
  }
}

TransGraph(graph);

The result graph become this:

It seems like the path between nodes differed. But I don't known how to make it work. Could you please help me?

Or is there an option to plot horizontally placed graph directly?

[erikbrinkman]

you probably missed all of the x's and y's. Fortunately, this is now built in in the form of a tweak.

When constructing the layout function, there's a line in the example:

  .tweaks([shape]);

All you need to do is add another tweak to flip it:

  .tweaks([shape, d3dag.tweakFlip()]);

The edges will still look a bit weird due to the spline interpolation of d3. To fix that, change

const line = d3.line().curve(d3.curveMonotoneY);

to

const line = d3.line().curve(d3.curveMonotoneX);

You should then see: