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

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

• javascript
• html
• d3.js
• svg
• zooming

• 7 I started with d3 today, so I won't leave a real answer yet. You using version 4 of the api? Looks like d3.behavior.zoom moved to d3.zoom. – Quotidian Commented Aug 8, 2016 at 19:54
• d3 v4 doesn't have d3.behavior,zoom. Its just d3.zoom – Umesh Maharshi Commented Aug 8, 2016 at 20:00
• Also with the v4 you can use directly svg.attr("transform", d3.event.transform) as the event triggered on zooming now has a transform object with a toString method (Doc.) – mgc Commented Aug 8, 2016 at 20:42
• i am having the exact same issue. did you ever get a solution? – Paul Fitzgerald Commented Nov 1, 2016 at 10:27
• 1 @PaulFitzgerald the solution, as mentioned above, is to use d3.zoom instead. This works for v4. – MarkyDD Commented Dec 9, 2016 at 14:11

1 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");