testing out chained transitions using d3.active
via d3 docs
d3.selectAll("circle").transition()
.delay(function(d, i) { return i * 50; })
.on("start", function repeat() {
d3.active(this)
.style("fill", "red")
.transition()
.style("fill", "green")
.transition()
.style("fill", "blue")
.transition()
.on("start", repeat);
});
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body { background: #130C0E;}
</style>
</head>
<body>
<svg width="960" height="400">
<g id="vis" transform="translate(10, 10)"></g>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- d3 code -->
<script src=".script-compiled.js" charset="utf-8"></script>
</body>
</html>
https://d3js.org/d3.v4.min.js