CODEWITHSUNDEEP
javascripthtmld3.jssvgzooming
David Arutiunian
David Arutiunian

Reputation: 303

D3.JS 'zoom' undefined

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

Upvotes: 12

Views: 11386

Answers (1)

Vinod Selvin
Vinod Selvin

Reputation: 379

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

Upvotes: 12

Related Questions