CODEWITHSUNDEEP
javascriptd3.jssvg
redixhumayun
redixhumayun

Reputation: 1864

How to re-scale D3 map after zooming

I have a D3 map that I have created on a codepen. Below is the link

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

I have included some basic zooming and panning onto it. However, when I zoom I want the dots to re-scale to account for the zoom, not just stay the same size. I want them to separate out over the greater area that will be provided after zooming in.

I'm not sure what exactly I should be looking for, which is why I am having a hard time finding it.

Here is the code for the zoom I have currently implemented

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

svg.call(zoom);

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

Upvotes: 1

Views: 386

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

If you want the circles representing the meteorites to stay at their original size, regardless the zoom, this is a possible solution:

Rename your circles' variable:

var meteorites = meteorite.selectAll('circle')
    //etc..

And set their radii and stroke according to the zoom:

meteorites.attr('r', function(d) {
        return weight_scale(d.properties.mass) / d3.event.transform.k
    })
    .attr("stroke-width", 1 / d3.event.transform.k);

Here is the CodePen: http://codepen.io/anon/pen/VPapPa?editors=1010

PS: because of scope issues, I had to move some functions.

Upvotes: 1

Related Questions