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);
 })

results matching ""

    No results matching ""