Javascript 变换后的D3图像居中

我试图移动D3中的一个元素，以对应下面的一个圆。基本上，当用户在页面上缩放时，圆圈会缩小（这使它们在视觉上保持吸引力和分离）

我想构建一个通过缩放事件触发的函数，使图像保持在圆的中心。这些圆以其中心点为中心。但是，随着图像的缩小，它们似乎会向左移动，因为它们的定位点位于左上角

我需要一个解决方案，可能需要将它们牺牲的宽度和高度添加到它们的相对“x”和“y”属性中。我如何实现这样的功能？还是有更好的办法

区块建设者在这里：

以下是相关的代码位（图标变量是图像的起始宽度）：

---

谢谢你能提供的任何帮助

如果可以将它们定位为开始，则可以在缩放时以相同的方式更新它们，只需使用每个项目的新宽度/高度即可。最初，将每个项目附加以下属性：

.attr("x", (d) => projection([d.lat,d.lon])[0] - icon/2)
.attr("y", (d) => projection([d.lon,d.lat])[1] - icon/2)
.attr("width", `${icon}px`)
.attr("height", `${icon}px`)

它将图标从投影返回的x、y值偏移图标宽度和高度的一半，使其位于投影点的中心。注意：您的x值是用d.lat，d.lon而不是d.lon，d.lat设置的，而且，您的csv将lng，而不是lon作为标题，因此应使用d.lng）

要使图标保持在点的中心，只需使用新的图标宽度/高度（在您的情况下位于

iconMove

）和新的投影点更新图标：

.attr("x", (d) => projection([d.lng,d.lat])[0] - iconMove/2)
.attr("y", (d) => projection([d.lng,d.lat])[1] - iconMove/2)
.attr("width", iconMove)
.attr("height", iconMove);

---

这是一个更新的块（我不知道如何保存新的块生成器块）。

是的，这正是我想要的。让你把它讲清楚是很有帮助的。我有点忘记了我可以再次使用初始映射函数，除了重新减去图标每次移动的量。谢谢

.attr("x", (d) => projection([d.lng,d.lat])[0] - iconMove/2)
.attr("y", (d) => projection([d.lng,d.lat])[1] - iconMove/2)
.attr("width", iconMove)
.attr("height", iconMove);