Question

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

我想构建一个使用zoom事件触发的函数，该函数使图像在圆圈内居中。圆圈以其中心点为中心。但是，随着图像缩小，它们似乎向左移动，因为它们的锚点位于左上角。

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

blockbuilder在这里：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（我无法弄清楚如何保存新的块构建器块）。

变换后D3中的图像居中

1 个答案: