D3.JS 'zoom' undefined
<p>I am trying to make simple zoom/pan solution, using this code </p>

<pre><code>  var map = document.getElementById('map'),
      svg = d3.select('#map')
            .call(d3.behavior.zoom().on("zoom", function () {
                svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
            }))
            .append('g');
</code></pre>

<p>But at <a href="http://i.stack.imgur.com/EOGA5.png" rel="noreferrer">this</a> moment it gives:</p>

<pre><code>Uncaught TypeError: Cannot read property 'zoom' of undefined
</code></pre>

<p>In html I have just this: </p>

<pre><code>&lt;svg id="map" class="map" viewBox="0 0 8000 2000"&gt;&lt;/svg&gt;
</code></pre>

<p>P.S. Inspired by <a href="https://coderwall.com/p/psogia/simplest-way-to-add-zoom-pan-on-d3-js" rel="noreferrer">this</a></p>