如何获得自定义 SVG 路径以在 D3 中正确缩放？

【问题标题】：How can I get custom SVG paths to zoom correctly in D3?如何获得自定义 SVG 路径以在 D3 中正确缩放？
【发布时间】：2015-02-11 12:58:17
【问题描述】：

我有一张使用 D3 渲染的地图，其中包含 SVG 路径的位置标记。我为标记选择了 SVG 路径路径，因此当地图缩放时它们可以很好地缩放。但是，我似乎无法弄清楚如何实现这一点。

您可以查看我的示例代码here。尝试移动或缩放地图，您会看到标记消失了。

我认为可能发生的情况是，由于我在创建路径元素时没有将路径数据附加到路径元素，因此地理路径投影对象不知道如何缩放它。不知道为什么当我移动地图时位置标记会消失，我也不知道将数据附加到元素的正确方法。我尝试将路径数据传递给 data() 方法，但这似乎不起作用......有什么想法吗？

谢谢！

【问题讨论】：

标签： svg d3.js

【解决方案1】：

它们正在消失，因为在您的缩放功能中，您正在选择并重新投影它们。

您使用的缩放方法实际上不需要您重新投影任何东西，您只需执行以下操作：

var zoom = d3.behavior.zoom().on('zoom', function() {
   g.attr('transform', 'translate(' + d3.event.translate.join(',') + ') scale(' + d3.event.scale + ')');
   //g.selectAll('path').attr('d', path.projection(projection));
 });

您可以看到我已注释掉您的选择行。基本上g.selectAll('path') 也在选择你的标记。您可能不想这样做，因为路径实际上并没有首先投影。

话虽如此，缩放（几何缩放）的平移/缩放方法不需要重新投影路径。有关语义和几何缩放示例，请参阅 http://bl.ocks.org/mbostock/3680957 和 http://bl.ocks.org/mbostock/3680999。

【讨论】：