Hi,
I’m currently experimenting with d3-graphviz, and have copied the demo at https://github.com/magjac/d3-graphviz/blob/master/examples/demo.html using that transitions mechanism. The following is a simple example of what I’m doing:
let graphviz = d3.select("#graph").graphviz()
const dots = [
'digraph { a }',
'digraph { a->b }',
'digraph { a->b->c }',
]
let dotIndex = 0;
const render = function() {
var dot = dots[dotIndex];
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex++
if (dotIndex < dots.length) {
render()
}
})
}
graphviz
.transition(function () {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(5000)
.duration(500)
})
.on("initEnd", render)
The problem is that nothing happens for the first ‘delay’ seconds, whereas I would like the ‘a’ node to appear immediately, with the delay only affecting the later items. Is is possible to adjust the transition on a per-node basis?
As a bonus, is there a way to have aplay/pause button so that the user can start and stop the transition, and/or forward/back buttons to manually control things instead of automatic movement?
Thanks!