Search code examples
d3.jsgraphviz

Increasing rank spacing in graphviz

I have a graph laid out using D3 graphviz. It's laying out in a pretty dense way, and I'd like it to use more of the width of the screen.

a graph laid out in a way that doesn't use the whole screen

I have tried adjusing the ranksep and the ratio, but neither seem to have any effect. I've also tried changing the node border, to no effect. Changing the edge minlength just makes the edges look floppy. I can try giving every node an invisible child, but that seems like a horrible hack.

For clarity, by rank, I mean the horizontal spacing between the columns of nodes. (The graph is laid out left to right.)

Ideally I'd be able to give it an aspect ratio and it'd make the most of that space to lay out the graph in a way that doesn't need too much acrobatics.

  • Am I missing something obvious?
  • I may well be using the options incorrectly
  • or the D3 graphviz implementation may not have those features?
  • Is there no good way to do this?
Solution

  • I have added :

    size = "16.66,8.33!"; // 1200x600 at 72px/in, "!" to force
ratio = "fill"; // see https://graphviz.gitlab.io/_pages/doc/info/attrs.html#d:ratio

    at the beginning of the graph declaration (just after digraph G {).

    It renders a wider output.

    Have a try and tell.