D3 Examples - d3-jetpack-transitioning-translate

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
  body {
    width: 960px;
    height: 500px;
  }
​
  circle{
    fill-opacity: .5;
    stroke: black;
  }
</style>
​
<body></body>
​
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3-jetpack.js"></script>
​
<script>
​
var r = 15,
    width  = 960 - r*2,
    height = 500 - r*2
​
var svg = d3.select("body").append("svg")
    .attr("width",  width  + r*2)
    .attr("height", height + r*2)
  .append('g')
    .translate([r, r])
​
​
function drawCicle(pos){
  svg.append('circle')
      .attr('r', r)
      .datum([Math.random()*width, Math.random()*height])
      .translate(pos)
      .on('mouseover', drawCicle)
    .transition()
      .translate(function(d){ return d })
}
​
drawCicle([width/2, height/2])
​
</script>
​
    