title: Apply zoom event on existing SVG (d3.js v4)
body: <p>I try to make my SVG zoomable in d3.js (version 4).</p>
  
  <p>You can see my attempt here : <a href="https://jsfiddle.net/ghpo6ayo/2/" rel="nofollow"><strong>JSFiddle</strong></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;svg id="mySVG" width="800px" height="600px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: lightgrey;"&gt;
    &lt;g&gt;
      &lt;path d="M 0 0 L 100 0 L 100 20 L 0 20 Z" fill="red"&gt;&lt;/path&gt;
      &lt;path d="M 500 500 L 600 500 L 600 520 L 500 520" fill="green"&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function() {
      var svg = d3.select("#mySVG")
    .call(d3.zoom().on("zoom", function () {
      svg.attr("transform", "translate(" + d3.event.transform.x + " " + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")");
    }));
  
    // For test purposes
    //$('#mySVG').css('transform', 'scale(2)');
  });
  </code></pre>
  
  <p>In fact, all seems to work since when I check in the Google's code inspector, focusing on my SVG element, I see the value of translate and scale changing as I mousewheel forward/backward. But nothing happens to the actual element which is very strange since I also tryied to change those scaling/translating value through plain jQuery and the SVG responds by scaling correctly.</p>
  
  <p>Can anyone point me in the right direction for this task ?</p>
  
  <p>For the record, here is the official documentation for the <a href="https://github.com/d3/d3-zoom/blob/master/README.md#zoom" rel="nofollow"><code>d3.zoom()</code></a> function.</p>