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

Question

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

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

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

谢谢！

Answer 1

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

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

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

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

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

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

How can I get custom SVG paths to zoom correctly in D3?

svg

d3.js