Map 为什么我的D3缩放变换没有正确居中？

我正在将地图升级到D3的v3版本，并使用D3示例代码中概述的点击缩放转换

我的代码几乎相同，只是我的地图的尺寸稍小一些（564 x 300而不是960 x 500）。此外，我将地图嵌套在一个div中，并位于页面的左上角（尽管我认为这并不重要）

我的地图加载的初始加载很好（当前使用黑色背景进行区分）

但是，当单击某个状态并运行click函数时，我的转换似乎处于关闭状态。在我的例子中，单击了阿肯色州（用蓝色阴影表示）

我唯一的想法是，我的质心计算需要稍微调整，以适应较小的尺寸或地图的不同位置，但这似乎也不正确

如何进行适当的调整

---

编辑：我发现如果我在变换的末尾添加一个“负平移”（translate（“+-x+”，“+-y+”），它会更接近于正确地以缩放为中心，但不是完美地

你会错过两个变换中的一个；但请继续阅读，以获得更简单的解决方案

您使用的示例有两个嵌套的转换。首先，外部G元素上的静态变换：

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");

此转换的用途与通常相同，但示例使用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>

---

这也消除了将投影的平移设置为[0，0]的需要，因此可以使用标准的平移[width/2，height/2]。我必须这么做

我知道我有点不对劲！谢谢你的更新和简化。这很有魅力@你能看一下我的问题吗：它和这里的很相似。

g.transition()
    .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")");

<g transform="translate(480,250)">
  <g id="states" transform="translate(75.746,-439.514)scale(4,4)">
    …
  </g>
</g>

<g id="states" transform="scale(4)translate(18.936679862557288,-109.8787070159044)">
  …
</g>

g.transition()
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"
        + "scale(" + k + ")"
        + "translate(" + x + "," + y + ")");