I had 5 cluster in which the each cluster elements interconnected to each other.
If I want to hide one cluster including elements by checking the checkbox and the output will render with remaining clusters.
Kindly guide how to do.
Graphvis does not support checkboxes, or anything similar.
Graphvis’s HTML is not a complete implementation of 4.01 HTML, let alone anything newer. (see Node Shapes | Graphviz)
Seemingly, you would have to produce svg output and then add enough javascript to make clusters interactive. (though maybe someone else can point at an existing wrapper to do this)
1 Like
Yes, try put IDs on your clusters, render to SVG, and then use javascript to select the cluster elements and show/hide them.
1 Like
After hiding the one cluster
Can remain cluster render itself or I need something to render it again.
If you want the remaining graph to rearrange itself, you will have to re-render it.
Sir,
How to re-render
Is their any .js script which I add to my html to re render
At some point i tried adding this type of functions to a javascript script i have developed, which can be added to an svg to make it interactive: ( BartBrood/dynamic-SVG-from-Graphviz: javascript code that can be added to an SVG created by Graphviz to make it dynamic. (github.com))
it is however complex to cope with re-rendering a graph when collapsing and expanding clusters without using the graphviz library again. I think it could be done if you constraint it to nice horizontal layers (using osage) in a graph where you collapse and expand horizontal layers of a diagram.
Few other things to check:
-
use a WASM version of graphviz, if you use the library you can re-render the graph on the browser side. Of course this means you need to map the checkbox back to the orignal dot file and remove the cluster before re-rendering. hpcc-systems/hpcc-js-wasm: HPCC-Systems Web-Assembly (JavaScript) (github.com)
-
generate html from a dot file: AdmTal/graphviz_site_generator: Convert DOT files into Interactive SVG websites (github.com)