title: Add svg pan zoom to dynamically created svg with D3js
body: <p>For pan and zoom I use <a href="https://github.com/ariutta/svg-pan-zoom" rel="nofollow">this</a> library.</p>
  
  <p>So, when I right click, I create a new SVG element with D3js library like:</p>
  
  <pre><code>$("body").on("contextmenu", function(e) {
          var parent = d3.select("#panzoom");
          var id = "svg"+($("#panzoom svg").length+1);
  
          var svg = parent.append("svg").attr("width", 200+"px").attr("height", 200+"px").attr("x", e.pageX+"px").attr("y", e.pageY+"px").attr("id", id);
          var rectSelection = svg.append("rect")
          .attr("x", e.pageX)
          .attr("y", e.pageY)
          .attr("width", 200)
          .attr("height", 200)
          .attr("fill", "yellow");
  
         // here I put the below code ! (instead of #svg1, I put id variable declared above)
  });
  </code></pre>
  
  <p>To add pan zoom to svg, you can do like:</p>
  
  <pre><code>svgPanZoom("#svg1", {
           panEnabled: true,
           controlIconsEnabled: false,
           zoomEnabled: true,
           dblClickZoomEnabled: true,
           mouseWheelZoomEnabled: true,
           zoomScaleSensitivity: 0.2,
           minZoom: 0.2,
           maxZoom: 20,
           fit: true,
           contain: true,
           center: true,
           refreshRate: 'auto'
  });
  </code></pre>
  
  <p>For new created SVG is not possible to assign <code>svgPanZoom</code> (throws error that it doesn't exist in DOM)</p>
  
  <p>How to achieve for this ?</p>