CODEWITHSUNDEEP
javascriptd3.js
redixhumayun
redixhumayun

Reputation: 1844

Error during zoom on D3 map

So, I have created a map which shows meteorite impacts on the world. The map can be found here

http://codepen.io/redixhumayun/full/VPepqM/

I am trying to enable zooming on the map. I am able to zoom in on the countries, however the circles representing the meteorites don't move accordingly, and I get an error in the console. The circles stay in the same place as they originally are, they don't move according to the zoom.

Here is the error I get

Uncaught ReferenceError: meteorite is not defined

Here is the relevant code for the zoom

var zoom = d3.zoom()
             .on('zoom', zoomed);

function zoomed() {
  map.attr('transform', d3.event.transform);
  meteorite.attr('transform', d3.event.transform);
}

Upvotes: 0

Views: 118

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

The meteorite variable is local to the anonymous function function(data){ ..., so is not available outside that function.

If you move the declaration out to where map is defined it will work:

...
//creating the g variable for the svg element
var map = svg.append('g');

//adding the group to the svg for meteorites
var meteorite = svg.append('g');
...

Here's the updated code: http://codepen.io/anon/pen/egZdXO

Upvotes: 3

Related Questions