D3.JS 'zoom' undefined

Question

I am trying to make simple zoom/pan solution, using this 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');

But at this moment it gives:

Uncaught TypeError: Cannot read property 'zoom' of undefined

In html I have just this:

<svg id="map" class="map" viewBox="0 0 8000 2000"></svg>

P.S. Inspired by this

Answer 1

Try Below code: in v4 of d3.js, d3.behavior.zoom changed to d3.zoom

var svg;

svg= d3.select("svg")
        .call(d3.zoom().on("zoom", function () {
              svg.attr("transform", d3.event.transform)
         }))
        .append("g");