How do I adjust zoom size for a point in D3?

Question

This could be a classic case of \"you\'re doing it wrong\", but all of my searching to date hasn\'t warranted any help.

Here\'s my scenario:

I\'m using an al

Answer 1

This is happening because you are setting a scale transform instead of scaling the positions. You can see the difference here Basically it is the difference between:

// Thick lines because they are scaled too
var bottom = svg.append('g').attr('transform', 'scale('+scale+','+scale+')');
bottom.selectAll('circle')
    .data(data)
    .enter().append('circle')
    .attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; });

and

// line thicknesses are nice and thin
var top = svg.append('g');
top.selectAll('circle')
    .data(data)
    .enter().append('circle')
    .attr('cx', function(d) { return d.x * scale; })
    .attr('cy', function(d) { return d.y * scale; });

With mapping probably you best solution is to compute your offset and scale as you do and then add them into your projection function - you want to directly modify the post-projection x and y values. If you update your projection function properly you should not have to do anything else to apply the appropriate zoom to your map.