javascript - DataMap/D3 - 如何重置缩放？

Question

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

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

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

• https://github.com/d3/d3-zoom/issues/107
• 如何在 d3.js 中重置缩放？

非常感谢！

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

让我们知道它是否适合您