Getting layers to work with SVG

Show and Tell
6

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.