title: How to use D3 zoom behavior with ViewBox instead of transform
body: <p>I would like to take advantage of D3's zoom behavior functionality, but I need to do all translations/scaling of my SVG using the viewBox property instead of the transform method as shown in the D3 example: <a href="http://bl.ocks.org/mbostock/3680999" rel="noreferrer">http://bl.ocks.org/mbostock/3680999</a></p>
  
  <p>How can I achieve this same scale/translate using only the viewBox? Here's my code so far, which doesn't work well like the transform method.</p>
  
  <pre><code>function zoomed(d) {
    if (!scope.drawLine) {
      var scale = d3.event.scale;
      var translation = d3.event.translate;
  
      //This works, but I can't use it for reason's I won't go into now
      //mapSVG_G.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  
      var newViewBox = [
        initialViewBox[0] - translation[0],
        initialViewBox[1] - translation[1],
        initialViewBox[2]/scale,
        initialViewBox[3]/scale
        ];
        mapSVG.attr('viewBox', newViewBox);
      }
  }
  </code></pre>