How to align a graph in a more centered way

[pbrzosko]

Hi,

I have a simple graph and it renders like that:

How can I make it to render more like that, of course please don't bother about broken links, it is more about node placement:

[pbrzosko]

  const graph = builder(data);
  const layout = sugiyama()
    // @ts-ignore
    .nodeSize([constants.BASE_HEIGHT, constants.BASE_WIDTH])
    .gap([50, 50])
    .layering(
      layeringSimplex().rank(
        (node: GraphNode<{ passage: number }>) => node.data.passage
      )
    )
    .tweaks([tweakFlip("diagonal")])
    .coord(coordCenter());```

[pbrzosko]

And also why do I get a TS error when I do sugiyama().nodeSize(). Looking at DefaultSugiyama type that is returned from sugiyama there is not nodeSize() function, is just readonly property nodeSize: readonly [1, 1];, so TS seems to be correct?

[erikbrinkman]

Can you post the exact error? It's harder to diagnose without seeing what the problem is.

[pbrzosko]

[erikbrinkman]

The layout looks like that because you're using coordCenter(), try using a different coordinate assignment algorithm, like the default, and you should get something closer to what you expect.

[pbrzosko]

Hi, the reason I started to playaround with coords was because the graph looked dxactly the same by default...

[erikbrinkman]

It should look significantly different, in this example you can see the stark difference between simplex (the default) and center (what you're using here)

[pbrzosko]

OK, so I think diagonal flip breaks it. Here is the result without tweaks and coord:

But still nodes are not centered in a way that two branches are equally aligned to the parent?

and when I apply a tweak, it is like that:

So I assumed I needed to switch node width with height and this caused the issue. So I reverted it back to .nodeSize([constants.BASE_WIDTH, constants.BASE_HEIGHT]) but it ends up like this - how to fix this?

[pbrzosko]

Seems like using coordGreedy and switching width with height produces more or less the layout that I want:

But do you know why the last node in the bottom subgraph is shifted?

[erikbrinkman]

1. For the tweaks, it'd be great to see the code associated with them. Your second image looks correct, just that the spacing is off. Potentially there's a bug with the way I'm handing spacing when applying the diagonal tweak, but it's hard to know without having something more concrete to work with.
2. the layout above is as expected. There is nothing to inherently center the graph, and so for for spits for two edges, it just picks one, this is inherent to the optimization.
3. coordGreedy is exactly what it sounds like, a greedy algorithm, so it's not perfect. The coordStep simply takes the layered dag and assigns y coordinates (in the flipped version). You're able to substitute your own if you don't like any of the outputs, but it's not trivial. You might also try coordQuad but I think it will make the tails bow outward, so it may not be preferable.

Also, I may have missed a question, so feel free to ask it again. This interface isn't great for asking several questions in a row, as I can't answer inline.