Graphviz text wrapping

New To Observable
1

I am using graphviz/dot layouts for graph data. Some of my labels are very long. Graphviz does not natively support text wrapping. I am dynamically creating graphs, so manual wrapping is out of the question.

I have looked into several workarounds - for D3, Graphviz, etc. Many of these are several years old and I have not been able to find any that work. It should be simple, but it’s turning out to be frustratingly difficult.

I would love to resolve this.

2

One thing you could try is to use a simple wrapping function for the labels of the Graphviz nodes:

example = dot`digraph g {
  rankdir = LR;
  a [label="${wordWrap("One two", { maxLength: 3 })}"]
  a -> b -> c;
}`

Something that might be worthwhile would be to try and find a JS library that can implement more robust wrapping, in case your data doesn’t work with such a simple wrapping function.

3

We designed one specifically for Observable Plot, for use in the multiline text mark; see the splitter function here:

fwiw here is a notebook that reuses an early version of this code to make a text “ellipsis” system. Splitting should not be that much different.