If d3-graphviz supported layers, this is what you would get. EDIT: No, you wouldn’t. The next reply shows that.
The extra features are:
- Smooth animated transitions between the layers.
- Fade-in and fade-out of entering and exiting components
- Growing edges (when they are new in a layer)
- Pan & zoom
- Play, pause, stop & repeat button. Those are specific to this forum and not built into d3-graphviz.
[dot verbose=true width=600 height=200]
digraph G {
# layers="local:pvt:test:new:ofc";
node [style=filled,color=lightblue];
# node1 [layer="pvt"];
node2 [layer="all",color=red];
# node3 [layer="pvt:ofc"]; /* pvt, test, new, and ofc */
# node2 -> node3 [layer="pvt:all"]; /* same as pvt:ofc */
# node2 -> node4 [layer=3]; /* same as test */
}
[/dot]
[dot verbose=true]
digraph G {
# layers="local:pvt:test:new:ofc";
node [style=filled,color=lightblue];
node1 [layer="pvt"];
node2 [layer="all",color=red];
node3 [layer="pvt:ofc"]; /* pvt, test, new, and ofc */
node2 -> node3 [layer="pvt:all"]; /* same as pvt:ofc */
# node2 -> node4 [layer=3]; /* same as test */
}
[/dot]
[dot verbose=true]
digraph G {
# layers="local:pvt:test:new:ofc";
node [style=filled,color=lightblue];
# node1 [layer="pvt"];
node2 [layer="all",color=red];
node3 [layer="pvt:ofc"]; /* pvt, test, new, and ofc */
node2 -> node3 [layer="pvt:all"]; /* same as pvt:ofc */
node2 -> node4 [layer=3]; /* same as test */
}
[/dot]
[dot verbose=true]
digraph G {
# layers="local:pvt:test:new:ofc";
node [style=filled,color=lightblue];
# node1 [layer="pvt"];
node2 [layer="all",color=red];
node3 [layer="pvt:ofc"]; /* pvt, test, new, and ofc */
node2 -> node3 [layer="pvt:all"]; /* same as pvt:ofc */
# node2 -> node4 [layer=3]; /* same as test */
}
[/dot]
[dot verbose=true]
digraph G {
# layers="local:pvt:test:new:ofc";
node [style=filled,color=lightblue];
# node1 [layer="pvt"];
node2 [layer="all",color=red];
node3 [layer="pvt:ofc"]; /* pvt, test, new, and ofc */
node2 -> node3 [layer="pvt:all"]; /* same as pvt:ofc */
# node2 -> node4 [layer=3]; /* same as test */
}
[/dot]
As you can see, I’ve cheated by commenting out components that are not visible in a layer. The idea is just to show what you would get if layers were supported.