Two Flashing Circles using D3
Aim
Make two SVG circles flash using different methods.
Background
I am making an Android App using React Native and D3. The app includes a timeline with nodes at various points which will flash if they are currently active or pending.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="../d3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="flash.js" type="text/javascript"> </script>
</body>
</html>
flash.js
var margin = {top: 10, bottom: 10, left: 20, right:20},
width = 300 - margin.left - margin.right,
height = 100 - margin.top - margin.top
radius = 20
var svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
// OPTION 1
function flashingCircle(duration) {
var cir = svg.append("circle")
.attr("class", "circle")
.attr("cx", margin.left+radius)
.attr("cy", margin.top+radius)
.attr("r", radius)
.attr("fill", "red")
.attr("stroke", "black")
repeat();
function repeat() {
cir
.transition()
.ease(d3.easeQuad)
.duration(duration)
.attr("fill", "#fff")
.attr("cx", width-radius)
.transition()
.ease(d3.easeQuad)
.duration(duration)
.attr("fill", "red")
.attr("cx", margin.left+radius)
.on("end", repeat);
}
}
flashingCircle(3000)
// OPTION 2
var circle2 = svg.append("circle")
.attr("class", "circle")
.attr("cx", margin.left+radius)
.attr("cy", margin.top+radius)
.attr("r", radius)
.attr("fill", "blue")
.attr("stroke", "black")
circle2.transition()
.ease(d3.easeQuad)
.on("start", function repeat() {
d3.active(this)
.attr("fill", "blue")
.transition()
.duration(3000)
.attr("fill", "grey")
.transition()
.duration(3000)
.on("start", repeat);
})