search

magjac / d3-graphviz

Graphviz DOT rendering and animated transitions using D3
BSD 3-Clause "New" or "Revised" License
1.67k stars 103 forks source link

Tweening of shapes #315

Open andreash opened 1 month ago

andreash commented 1 month ago

I am experimenting with the SVG generated by Graphviz and was, for some reasons, deleting the elements from each node group (g, class "node"). This caused the tweening to behave awkward. Is my assumption right, that you are using the node ids in the title elements for referencing between an existing svg and the next one? If yes - could you point me to the point in the code where this is implemented? I am transferring the node id to the g element and would like to get rid of the <title> elements because auf UI design.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/magjac"><img src="https://avatars.githubusercontent.com/u/6350376?v=4" />magjac</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Is my assumption right, that you are using the node ids in the title elements for referencing between an existing svg and the next one?</p> </blockquote> <p>By default, yes, but you can change that with the <a href="https://github.com/magjac/d3-graphviz?tab=readme-ov-file#graphviz_keyMode">keyMode</a> function. For details see <a href="https://github.com/magjac/d3-graphviz?tab=readme-ov-file#maintaining-object-constancy">Maintaining Object Constancy</a>.</p> <blockquote> <p>If yes - could you point me to the point in the code where this is implemented?</p> </blockquote> <p>It's in the <a href="https://github.com/magjac/d3-graphviz/blob/master/src/dot.js#L143">setKey function</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/andreash"><img src="https://avatars.githubusercontent.com/u/95178?v=4" />andreash</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Thanks - setting the id for nodes and edges and set keyMode to "id" works well. Deleting the <title> tags from the class="node" groups now doesn't disturb the tweening process any more. However, if I delete the <title> tag from the class="edge" svg groups as well, d3graphviz encounters an "undefined" error.</p> <p>BTW, it would be great if the generated svg string is made accessible in one of the lifecylce callbacks. right now I am using a trick (I patched "parseFromString" in the DOMParser class, to get hold of the svg string bevore it is being attached to d3.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>