Skip to content

Instantly share code, notes, and snippets.

@dbuezas

dbuezas/index.html

Last active September 7, 2021 14:03
Show Gist options
  • Save dbuezas/cc9e5ec4df29b9f436ce2755b6a54fbf to your computer and use it in GitHub Desktop.
Save dbuezas/cc9e5ec4df29b9f436ce2755b6a54fbf to your computer and use it in GitHub Desktop.
Download ZIP
Demo of d3-graphviz transition interruptions not working
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/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