Last active
September 7, 2021 14:03
-
-
Save dbuezas/cc9e5ec4df29b9f436ce2755b6a54fbf to your computer and use it in GitHub Desktop.
Demo of d3-graphviz transition interruptions not working
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script> | |
| <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script> | |
| <button onclick="run()">RUN</button> | |
| <div width="100%"> | |
| <div width="100%" style="width: 30%; float: left;"> | |
| <div id="comment1"> </div> | |
| <div id="graph1"> </div> | |
| </div> | |
| <div width="100%" style="width: 30%; float: left;"> | |
| <div id="comment2"> </div> | |
| <div id="graph2"> </div> | |
| </div> | |
| <div width="100%" style="width: 30%; float: left;"> | |
| <div id="comment3"> </div> | |
| <div id="graph3"> </div> | |
| </div> | |
| </div> | |
| <script> | |
| var graphviz1 = d3.select("#graph1").graphviz() | |
| var graphviz2 = d3.select("#graph2").graphviz() | |
| var graphviz3 = d3.select("#graph3").graphviz() | |
| var dots = [ | |
| `digraph { | |
| a->b | |
| a->c | |
| c->d | |
| d->a | |
| }`, | |
| `digraph { | |
| a->b | |
| b->c | |
| c->d | |
| }`, | |
| ]; | |
| var sleep = (ms) => new Promise(r => setTimeout(r,ms)) | |
| var duration = 3000 | |
| var t = () => d3.transition().ease(d3.easeLinear).duration(duration); | |
| graphviz1.renderDot(dots[1]) | |
| graphviz2.renderDot(dots[1]) | |
| graphviz3.renderDot(dots[1]) | |
| var comment1 = d3.select("#comment1").node() | |
| var comment2 = d3.select("#comment2").node() | |
| var comment3 = d3.select("#comment3").node() | |
| async function run1(){ | |
| comment1.innerText = "render 0" | |
| await sleep(200) | |
| graphviz1.transition(t).renderDot(dots[0]) | |
| comment1.innerText += ". wait" | |
| await sleep(duration) | |
| comment1.innerText += ". render 1" | |
| graphviz1.transition(t).renderDot(dots[1]) | |
| } | |
| async function run2(){ | |
| comment2.innerText = "render 0" | |
| await sleep(200) | |
| graphviz2.transition(t).renderDot(dots[0]) | |
| comment2.innerText += ". wait" | |
| await sleep(duration/2) | |
| comment2.innerText += ". render 1" | |
| graphviz2.transition(t).renderDot(dots[1]) | |
| } | |
| async function run3(){ | |
| comment3.innerText = "render 0" | |
| await sleep(200) | |
| graphviz3.transition(t).renderDot(dots[0]) | |
| comment3.innerText += ". wait" | |
| await sleep(duration/2) | |
| comment3.innerText += ". interrupt" | |
| d3.selectAll("#graph3 *").interrupt() | |
| await sleep(200) | |
| comment3.innerText += ". render 1" | |
| graphviz3.transition(t).renderDot(dots[1]) | |
| } | |
| function run(){ | |
| run1() | |
| run2() | |
| run3() | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment