Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <style>
    
    .zoom-layer {
      fill: #EEE;
      fill-opacity: 0.25;
    }
    
    </style>
</head>
<body>
  <svg width="300" height="300">
    <g>
      <circle cx=150 cy=150 r=20 style="fill:#F22"></circle>
      <rect x=0 y=0 width=300 height=300 class="zoom-layer"></rect>
    </g>
  </svg>
</body>
<script src="script.js"></script>

</html>

// Code goes here

var zoom = d3.zoom()
  .scaleExtent([1, 100])
  .translateExtent([[150, 150],[150, 150]])
  .on('zoom', zoomFn);

  d3.select('svg')
  .select('g')
  .style("transform-origin", "50% 50% 0");

function zoomFn() {
  d3.select('svg').select('g')
    .style('transform', 'scale(' + d3.event.transform.k + ')');


}

d3.select('svg')
  .select('rect')
  .call(zoom);

/* Styles go here */