如何在响应式地图中以编程方式缩放到 D3 中的元素？答案

【问题标题】：How to programmatically zoom to Elements in D3 in responsive map?如何在响应式地图中以编程方式缩放到 D3 中的元素？
【发布时间】：2021-11-22 05:24:57
【问题描述】：

我有一个使用 d3.xml 导入的 SVG，当我单击 SVG 中的一个椭圆时，我试图放大。这几乎可以工作，尽管我缺少一些在 SVG 大小发生变化时定位元素的功能。这是我用来缩放的代码：

svg.transition().duration(750).call(
    zoom.transform,
    d3.zoomIdentity
      .translate(widthContainer/2 , heightContainer/2)
      .scale(2)
      .translate(-d3.select(this).attr('cx'), -d3.select(this).attr('cy')),
    d3.pointer(event, svg.node())
);

当浏览器窗口的大小代表创建 svg 的大小时，此方法有效，因为椭圆的 cx 和 cy 值可用于定位它们，尽管当我增加浏览器窗口当然不再起作用，因为 cx 和 cy 值现在已经不存在了。如何居中并缩放到独立于当前上下文的元素？我猜有一种方法可以找出父 div 的当前比例，然后从那里计算翻译参数，但经过几个小时的尝试，我没有找到任何东西。

【问题讨论】：

标签： javascript svg d3.js zooming programmatically

【解决方案1】：

我找到了解决问题的方法，我最大的错误是假设要让我的地图响应，我需要更新我的变量 widthContainer 和 heightContainer（它们用于在我的代码中计算缩放位置等）在页面加载和调整大小时具有当前视口宽度。这引入了一堆非常奇怪的行为，并导致我花费数小时进行本可以避免的调试。

制作具有响应式缩放功能的地图的解决方案是将这两个变量设置为固定值。如果您使用的 SVG 使用 d3 读取为 xml，则使用在 SVG 的 viewbox 属性中设置的值，例如viewBox="0 0 657.58 344.67".

然后您可以像往常一样在 css 中处理 SVG 元素所在的容器，并将您的宽度设置为 100% 或任何您喜欢的值，并且地图应该会做出响应。我是 d3 和 JS 的菜鸟，所以这种行为对我来说似乎不合逻辑，特别是因为 d3 的 zoomIdentity 的文档非常差。对于普通的 d3 用户来说，这似乎是显而易见的，但我希望这能影响到其他 d3 初学者。

【讨论】：