DataMap/D3 - 如何重置缩放？

【问题标题】：DataMap/D3 - how to reset zoom?DataMap/D3 - 如何重置缩放？
【发布时间】：2019-09-15 15:12:29
【问题描述】：

我有一个DataMaps 地图，它基于 D3.js（版本 3），并且我添加了滚动缩放。唯一的问题是我还没有找到如何重置它的方法。

var reset = document.getElementById('reset-map');
var map = new Datamap({
     element: document.getElementById('world-map'),
     responsive: true,       
});
map.svg.call(d3.behavior.zoom().on('zoom', function () {
     reset.style.display = 'block';
     map.svg.selectAll('g').attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.scale + ')')
}));
reset.addEventListener('click', function (e) {
     e.preventDefault();
     // TODO remove zoom
     reset.style.display = 'none';
} );

找到了这两个，但我不知道如何在我的情况下应用它，请你帮忙吗？

非常感谢！

【问题讨论】：

标签： javascript d3.js datamaps

【解决方案1】：

试试这个：

var zoom = d3.behavior.zoom().on('zoom', function () {...});
map.svg.call(zoom);

重置时（它是 V4 代码，不确定它是否适用于 V3）：

var transform = d3.zoomIdentity.translate(0, 0).scale(1);
map.svg.call(zoom.transform, transform);

让我们知道它是否适合您

【讨论】：

谢谢，因为 d3.zoomIdentity 在 v3 中未定义，所以 ut 不起作用，但是，您为我指明了正确的方向。可能不是最好的解决方案，但可以工作：map.svg.selectAll('g').attr('transform', 'translate(0,0) scale(1)');。 :)
我不是那个投反对票的人，但是，这不是我的问题的答案（所以任何愿意一步一步的人都可以使用它作为解决方案），我找到了一种破解它的方法周围，你可以在你的答案中使用它，但是，我很确定必须有一种我很想知道的正确方法。