title: Map zoom and pan in d3 js v4 + scale limit
body: <ol>
  <li><p>I've got <a href="http://jsbin.com/jizuqep/11" rel="nofollow noreferrer">this</a> d3 js map. I've tried to make such a simple thing as zoom
  and pan and just stalled. Now only dots zooms (I use v4). How to 'synchronize' zoom and pan of dots and map svg?</p></li>
  <li><p>How to set limits of zoom and pan in d3 v4? I want it to be like <a href="https://bl.ocks.org/mbostock/c1c0426d50ca8a9f4c97" rel="nofollow noreferrer">this</a></p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .style("border","none") 
            .style("background-color", "none")
            .call(d3.zoom().on("zoom", function () {
            svg.attr("transform", d3.event.transform)
                   }))
            .append("g");</code></pre>
  </div>
  </div>
  </p>