index.html
<!DOCTYPE HTML>
<html>
<style>
body, html{ margin: 0; }
text{ font-size: 20px; }
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var w = 800, h = 800
, x = d3.scale.linear().domain([0, w]).range([0, w])
, y = d3.scale.linear().domain([0, h]).range([0, h])
, r = 100
, prevScale = 1
, zoom = d3.behavior.zoom(svg).x(x).y(y).scaleExtent([1, 10])
.translate([w / 2, h / 2])
.on('zoom', function(){
var t = zoom.translate(), s = zoom.scale()
if(prevScale !== s) label.text('scaling!!')
else label.text('dragging!')
prevScale = s
circle.attr({ cx: t[0], cy: t[1], r: r * s })
})
, svg = d3.select('body').append('svg')
.attr({width: w, height: h }).call(zoom)
, circle = svg.append('circle').attr({cx: w / 2, cy: h / 2, r: 100 })
, label = svg.append('text').attr({y: 40, x: 40})
</script>
</body>
</html>