Question

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

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

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

谢谢！

Answer 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。

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

1 个答案: