Animating pre-existing SVGs created by external DOT

[Luttik]

Hi again,

In your documentation you describe the steps of this library:

1. Uses @hpcc-js/wasm to do a layout of a graph specified in the DOT language and generates an SVG text representation
2. which is analyzed and converted into a data representation.
3. Then D3 is used to join this data with a selected DOM element, render the SVG graph on that element and to animate transitioning of one graph into another.

I was wondering if it would be possible to start at step 2 when you already have dot generated SVG files. Or even directly use the "data representation" of the SVG and still get the animation benefits from this project.

This would be great for users like me who do data science in python and just need a way to output the graphs.

I hope that this would help me to obtain a workaround for https://github.com/magjac/d3-graphviz/issues/178.

I think your project is highly interesting and I believe that having more interfaces (e.g. using the individual steps rather than the entire process at once) would make this project interesting in even more scenarios.

[magjac]

I think that that could be possible to implement as long as the SVG is rendered with Graphviz. The animations are "Graphviz-aware" so they might not make sense for arbitrary SVG.

That said, I'm more interested in solving #178 than providing a workaround.

[Luttik]

@magjac One of the use-cases that would be great is being able to modify the thickness of an arrow-head separately from the entire arrow (as far as I know this is not possible in Graphviz, but it is definitely possible in the SVG). It keeps annoying me that arrowheads can become insanely thick and ugly (half-hidden behind nodes) when high line thickness can often not be prevented in scenario's where it has explicit meaning.

Could you suggest a way to go about something like this? (I guess this might be possible in the data model that you extract from the SVG before rendering).

[magjac]

One of the use-cases that would be great is being able to modify the thickness of an arrow-head separately from the entire arrow (as far as I know this is not possible in Graphviz...)

It is possible though the arrowsize attribute. See http://magjac.com/graphviz-visual-editor/?dot=digraph%20%7B%0A%20%20%20%20Hi%20-%3E%20Daan%20%5Bpenwidth%3D3%5D%0A%20%20%20%20Daan%20-%3E%20Luttik%20%5Bpenwidth%3D3%20arrowsize%3D0.3%5D%0A%7D%0A

[Luttik]

Ah, that is interesting.

However, maybe I'm. Missing something, but it still seems impossible to have a thick arrow line (i.e the line from the previous node towards the arrow head) and a relative small arrow head.

@magjac was just right

[magjac]

Isn't that what my example is showing?

[Luttik]

🙈 It totally is, it just seemed to me that the arrows were just a different size and the lower had the right offset from the node.

Below an example to illustrate the example more starkly.

digraph {
    Hi -> Magnus [penwidth=10]
    Magnus -> Jacobsson [penwidth=10 arrowsize=0.05]
    Jacobsson -> Bye [penwidth=1 arrowsize=3]
}

Since you know graphviz stuff that I somehow never found in the docs, I have another question. Can we compensate the penwidth overflow (i.e. the stroke is overlapping with the node) somehow, such that the end of the arrow corresponds with the edge of the node.

[magjac]

I don't know. This sound like an excellent question to ask in https://forum.graphviz.org/c/help/5 or if you think it's a bug you can file an issue at https://gitlab.com/graphviz/graphviz/-/issues/new.

[Luttik]

I just asked on my forum. IMO this request is unchanged. Of course, I totally understand if it gets low priority.