Skip to content

Instantly share code, notes, and snippets.

@dbuezas

dbuezas/index.html

Last active September 7, 2021 14:25
Show Gist options
  • Save dbuezas/2f301fefb3ed150584236d129f02d382 to your computer and use it in GitHub Desktop.
Save dbuezas/2f301fefb3ed150584236d129f02d382 to your computer and use it in GitHub Desktop.
Download ZIP
test with interrupt fix
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>
<div style="width: 25%; float: left;">
<div id="comment1"></div>
<div id="graph1"> </div>
</div>
<div style="width: 25%; float: left;">
<div id="comment2"></div>
<div id="graph2"> </div>
</div>
<div style="width: 25%; float: left;">
<div id="comment3"></div>
<div id="graph3"> </div>
</div>
<div style="width: 25%; float: left;">
<div id="comment4"></div>
<div id="graph4"> </div>
</div>
</div>
<script>
var graphviz1 = d3.select("#graph1").graphviz()
var graphviz2 = d3.select("#graph2").graphviz()
var graphviz3 = d3.select("#graph3").graphviz()
var graphviz4 = d3.select("#graph4").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])
graphviz4.renderDot(dots[1])
var comment1 = d3.select("#comment1").node()
var comment2 = d3.select("#comment2").node()
var comment3 = d3.select("#comment3").node()
var comment4 = d3.select("#comment4").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])
}
async function run4(){
d3.selectAll('#graph4 *').interrupt("reload");
const t = d3.transition().ease(d3.easeLinear).duration(duration);
.on("interrupt", () => {
d3.selectAll([container]).selectAll("*").nodes().forEach((node) => {
if (node.__data__?.attributes?.d && node.getAttribute("d"))
node.__data__.attributes.d = node.getAttribute("d");
if (node.__zoom) {
const match = node.firstElementChild
.getAttribute("transform")
.match(/(-?[\d.]+)/g);
if (match) {
const transform = match.map(Number)
if (transform[0]!==undefined)node.__zoom.x = transform[0];
if (transform[1]!==undefined)node.__zoom.y = transform[1];
if (transform[2]!==undefined)node.__zoom.k = transform[2];
}
}
});
const node = d3.selectAll('#graph4 *').node()
var slots = node.__transition;
for (const self of Object.values(slots)) {
self.on.call("end", node, node.__data__, self.index, self.group);
}
});
comment4.innerText = "render 0"
await sleep(200)
graphviz4.transition(t).renderDot(dots[0])
comment4.innerText += ". wait"
await sleep(duration/2)
comment4.innerText += ". interrupt"
d3.selectAll("#graph3 *").interrupt()
await sleep(200)
comment4.innerText += ". render 1"
graphviz4.transition(t).renderDot(dots[1])
}
function run(){
run1()
run2()
run3()
run4()
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment