block by mpmckenna8 0659f124bc68c1233a62

setInterval() to make a function keep repeating

Full Screen

Trying to keep the David Bowie head moving as long as your javascript is running with setInterval().

index.html

<!DOCTYPE html>
<meta charset="utf-8">
    <style>

.floor{
  background:violet;
}
</style>
<body>


<script src="//d3js.org/d3.v3.js"></script>
<script src="threeBowie.js">        </script>
    </body>

threeBowie.js

var svg = d3.select('body').append('svg').attr('width', 720).attr('height',270).attr('class','floor');


var daves = [1,2,3,4]

var xpos = 40


// this is what appends some pictures to my svg
svg.selectAll('.bows')
  .data(daves)
  .enter()
  .append('image')
  .attr('xlink:href', '/mpmckenna8/raw/f0abe7ae10eef35972bd/icon_21660.svg')
  .attr('x', function(d){
    return 70 * d
  })
  .attr('y', 40)
  .attr('width',100)
  .attr('height',100)
  .attr('class','bows');


function dance (){

  svg.selectAll('.bows')
  .transition()
  .delay(500)
  .attr('x',function(d){
    return Math.random() *720 -29;
  })
  .attr('y',function(d){
    console.log(this.x)
    return Math.random() *200 -30;
  })

  .duration(5000)



};

d3.select('svg')
.on('click',function(){
 return dance()}
)

setInterval(dance,6000)



dance()