title: How do I get d3.zoom working for inline svg?
body: <p>I am trying to use d3.zoom on an inline svg, specifically a map of the USA (please note that I am very inexperienced at d3js). After some research I found a simple tutorial for using d3.zoom <a href="https://www.datamake.io/blog/d3-zoom/" rel="nofollow noreferrer">https://www.datamake.io/blog/d3-zoom/</a>.</p>
  <p>The issue I have now is that it just doesn't work. There is no error which shows up. It just does nothing.</p>
  <p>Here is the HTML code with the svg map.</p>
  <pre><code>   &lt;div id=&quot;map&quot;&gt;
  
        &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
        &lt;svg id=&quot;usa_svg&quot; height=&quot;800&quot; width=&quot;1200&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 800 600&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
  
          &lt;g id=&quot;USA&quot;&gt;
            &lt;rect height=&quot;600&quot; width=&quot;1200&quot;&gt;&lt;/rect&gt;
            &lt;!-- paths here --&gt;
          &lt;/g&gt;
  
        &lt;/svg&gt;
  
     &lt;/div&gt;
  </code></pre>
  <p>Here is the JavaScript</p>
  <pre><code>var usa = d3.select(&quot;svg&quot;)
  var rect = d3.select(&quot;rect&quot;);
  var zoom = d3.zoom().on(&quot;zoom&quot;, zoomed);
  
  rect.call(zoom);
  
  function zoomed() {
    var transform = d3.event.transform;
    usa.attr(&quot;transform&quot;, transform.toString());
  }
  </code></pre>
  <p>I have no clue what I am doing wrong. Is it a syntax error? Am I just missing a vital part of the code? Help would be much appreciated.</p>