我正在将地图升级到D3的v3，并使用单击以缩放显示在here的D3示例代码中概述的变换。
我的代码几乎相同，除了我的地图尺寸略小（564 x 300而不是960 x 500）。此外，我的地图嵌套在div中，并位于页面的左上角（尽管我认为这并不重要）
我的地图加载的初始加载很好（当前使用黑色背景进行区分）
// 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");
但是，当单击状态并运行click函数时，我的转换似乎已关闭。就我而言，单击了阿肯色州（以蓝色阴影表示）
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");
}
我唯一的想法是我的质心计算需要针对地图的较小尺寸或不同位置进行些微调整，但这似乎也不对。
如何进行适当的调整？
编辑：我发现，如果在转换结束时添加一个“负翻译”（translate（“ + -x +”，“ + -y +”）），它将更接近正确地以缩放为中心，但不是完美
最佳答案
您缺少the example的两个转换之一；但请继续阅读以获取更简单的解决方案。
您使用的示例具有两个嵌套转换。首先，对外部G元素进行静态转换：
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.append("g")
.attr("id", "states");
此转换与projection.translate通常具有相同的目的，但是示例使用了translate（[0，0]）。 （正如我所说，会有一个更简单的解决方案……）
第二个变换是在内部G上动态设置的（ID为“ states”）以放大：
g.transition()
.attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")");
注意，这里的
var g指的是内部G元素，因为定义g时，有一个append("g")与第二个append("g")链接；该变量因此被定义为第二个内部G，而不是第一个外部G。生成的SVG如下所示：
<g transform="translate(480,250)">
<g id="states" transform="translate(75.746,-439.514)scale(4,4)">
…
</g>
</g>
您的派生缺少嵌套的内部G。因此，当您在#states G元素上设置“ transform”属性时，您将覆盖外部转换，从而得到以下结果：
<g id="states" transform="scale(4)translate(18.936679862557288,-109.8787070159044)">
…
</g>
因此，您缺少静态转换“ translate（480,250）”。
我建议将这些转换结合在一起。然后，您不需要外部G，您可以：
g.transition()
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"
+ "scale(" + k + ")"
+ "translate(" + x + "," + y + ")");
这也消除了将投影的平移设置为[0，0]的需要，因此您可以改用标准平移[width / 2，height / 2]。我已经updated the example做到了！
关于map - 为什么我的D3缩放变换无法正确居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15532405/