javascript - 转换后在 D3 中居中图像

Question

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

我想构建一个随缩放事件一起触发的函数，使图像在圆圈内居中。圆圈以它们的中心点为中心。然而，随着图像缩小，它们似乎向左移动，因为它们的 anchor 位于左上角。

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

区 block 生成器在这里:http://blockbuilder.org/KingOfCramers/125cc79bce7dea48b21786b37302d258

这是相关的代码(图标变量是图像的起始宽度):

function zoom() {
    var iconMove = icon/d3.event.transform.k;
    g.attr("transform", d3.event.transform)
    d3.selectAll(".storyImages")
      .attr("width", `${iconMove}px`)
        .attr("height", `${iconMove}px`)
        .attr("x", // Keep this centered)
        .attr("y", // Keep this centered)

    d3.selectAll("circle")
        .attr("r", function(){
         return cirSize/d3.event.transform.k
        })    
  }

感谢您提供的任何帮助!

Answer 1

如果您可以将它们定位到开始位置，则可以在缩放时以相同的方式更新它们，只需使用每个元素的新宽度/高度。您最初为每个元素附加这些属性:

.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);

这是一个更新的 block (我无法弄清楚如何保存新的 block 生成器 block )。