title: How to reset Zoom in d3.js?
body: <p>I have a simple svg rectangle and I have added zooming and panning on it using d3.js. I have also added a button in order to try and reset the zoom once the button is clicked. Here is the code:</p>
  
  <pre><code>&lt;button&gt;Reset&lt;/button&gt;
  &lt;body&gt;
    &lt;script&gt;
  
        function zoomed() {
                svg.attr("transform", d3.event.transform)
        }
  
      var svg = d3.select("body")
        .append("svg")
        .attr("width", "100%")
        .attr("height", "100%")
        .call(d3.zoom().on("zoom", zoomed))
        .append("g")
  
      svg.append("rect")
          .attr("x", 450)
          .attr("y", 200)
          .attr("width", 300)
          .attr("height", 200)
          .style("fill", "#B8DEE6")
  
      $("#Reset").click(() =&gt; {
      zoom.transform(container, d3.zoomIdentity.scale(1));
  })
  
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have tried zoom.transform(container, d3.zoomIdentity.scale(1)) but it does not seem to work. Can anybody please tell what is the problem with the resetting function?</p>