Why is my D3 zoom transform not centering properly? - dictionary

Question

I'm upgrading my map to v3 of D3 and using the click to zoom transformation outlined in the D3 example code found here.
My code is nearly identical except that my map has slightly smaller dimensions (564 x 300 instead of 960 x 500). In addition, I have my map nested within a div and off to the top left of my page (though I don't think this matters)
The initial load of my map loads is fine (using black background for distinction currently)
// Clear existing map in case there is remnant data.
$("#map").html(null);
var mapWidth = 564;
var mapHeight = 300;
var projection = d3.geo.albersUsa()
.scale(mapWidth)
.translate([0, 0]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#map")
.append("svg")
.attr("id", "map-svg")
.attr("width", mapWidth)
.attr("height", mapHeight);
svg.append("rect")
.attr("id", "map-background")
.attr("class", "background")
.attr("width", mapWidth)
.attr("height", mapHeight)
.on("click", click);
// Create placeholders for shapes and labels
var states = svg.append("g")
.attr("transform", "translate(" + mapWidth / 2 + "," + mapHeight / 2 + ")")
.attr("id", "states");
However, when a state is clicked, and the click function runs, my transform seems to be off. In my case, the state of Arkansas was clicked (indicated with blue shading)
function click(d)
{
var x = 0,
y = 0,
k = 1;
if (d && centered !== d)
{
var centroid = path.centroid(d);
x = -centroid[0];
y = -centroid[1];
k = 4;
centered = d;
}
else
{
centered = null;
}
d3.select("#states").selectAll("path")
.classed("active", centered && function (d) { return d === centered; });
d3.select("#states").transition()
.duration(1000)
.attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
.style("stroke-width", 1.5 / k + "px");
}
My only thought is that my centroid calculations need to be adjusted slightly for the smaller size or different position of the map, but this doesn't seem right either.
How do I make the proper adjustments?
EDIT: I found that if I add a "negative translation" at the end of the transform (translate(" + -x + "," + -y + ")) that it gets closer to properly centering on the zoom, but not perfectly

Answer 1

You're missing one of two transforms from the example; but read on for a simpler solution.
The example you're using has two nested transforms. First, a static transform on the outer G element:
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.append("g")
.attr("id", "states");
This transform serves the same purpose as projection.translate normally does, but the example is using the translate([0, 0]). (As I said, there will be a simpler solution…)
The second transform is set dynamically on the inner G (with id "states") to zoom in:
g.transition()
.attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")");
Note that the var g here refers to the inner G element, because when g was defined, there was an append("g") that was chained with a second append("g"); the variable is thus defined as the second, inner G, rather than the first, outer G.
The resulting SVG looks like this:
<g transform="translate(480,250)">
<g id="states" transform="translate(75.746,-439.514)scale(4,4)">
…
</g>
</g>
Your derivation is missing the nested, inner G. So when you set the "transform" attribute on your #states G element, you're overwriting the outer transform, giving you this:
<g id="states" transform="scale(4)translate(18.936679862557288,-109.8787070159044)">
…
</g>
So, you're missing the static transform, "translate(480,250)".
I'd recommend combining these transforms together. Then you don't need the outer G, and you can :
g.transition()
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"
+ "scale(" + k + ")"
+ "translate(" + x + "," + y + ")");
This also eliminates the need to set the projection’s translate to [0, 0], so you can use the standard translate [width / 2, height / 2] instead. I've updated the example to do just that!