[D3] Force + Drag + Zoom

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div>
<svg width="500" height="300">
  
  <g>
    <circle id='top' cx="320" cy="150" r="50" style="stroke: white; stroke-width: 2px; fill:white" />
  </g>
  <g>
    <circle id='top' cx="320" cy="150" r="40" style="stroke: red; stroke-width: 2px; fill:white" />
  </g>
  <g>
    <circle id='top' cx="320" cy="150" r="30" style="stroke: blue; stroke-width: 2px; fill:white" />
  </g>
</svg>
</div>

CSS

svg{
  background-color: black;
}
div{
    height: 900px;
    width: 500px;
}

JavaScript

var zoom = d3.behavior.zoom()
  .scaleExtent([0, 10])
  .on("zoom", function() {    
    var graph = d3.select('svg');
    graph
      .selectAll('g')
      .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  });
var svg = d3.select('svg').call(zoom);