轻轻放大到 D3 地图的中心答案

【问题标题】：Zoom softly into the center of a D3 map轻轻放大到 D3 地图的中心
【发布时间】：2015-08-20 01:44:34
【问题描述】：

我创建了一个 interactive map。该地图可以通过按钮进行缩放。这些按钮已经可以使用，但我不喜欢当前的样式。当点击按钮时，地图有点晃动，感觉不是 UX 友好的。我想轻轻地放大地图的中心。

这里放大按钮上的代码：

d3.select('#zoomplusbutton').on('click', function () {
    ardamap.zoomByFactor(1.3);
});

这里是带有奇怪缩放的功能代码：

zoomByFactor: function (factor) {
                d3.event.preventDefault();
                var scale = zoom.scale();
                var extent = zoom.scaleExtent();
                var newScale = scale * factor;
                if (extent[0] <= newScale && newScale <= extent[1]) {
                    var t = zoom.translate();
                    var c = [width / 2, height / 2];
                    zoom
                        .scale(newScale)
                        .translate([c[0] + (t[0] - c[0]) / scale * newScale, c[1] + (t[1] - c[1]) / scale * newScale])
                        .event(g.transition());
                }
            }

我真的不知道我从哪里得到这个缩放代码了。

那么我怎样才能真正柔和地缩放到地图的中心呢？随意更改网站上的 JS 代码。

【问题讨论】：

你不能在过渡上设置一个持续时间吗？
通常我可以。但我真的不知道在这里放置一个持续时间是否会解决所有其他问题。正如我所说，我不知道我从哪里得到这个代码。很久以前了。
好吧，如果你不知道你的代码，哈哈，当你忘记它所涉及的内容时，你将如何解决某事：/
我认为它滞后，因为您拥有的所有图像。我查看了您之前的问题，并注意到您加载大文件可能就是为什么您会得到抖动效果
好吧，但是尝试通过鼠标滚轮进行缩放，然后查看 rough 到 smooth。这就是我想要的方式。所以实际上是可以的。即使是我的图像。

标签： javascript d3.js zooming

【解决方案1】：

几个小时后，现在找到了一个“OK”的解决方案。它不是完美的中心，但最后没有晃动和任何其他不良行为：

zoomButton: function (zoom_in) {
            var scale = zoom.scale(),
                extent = zoom.scaleExtent(),
                translate = zoom.translate(),
                x = translate[0], y = translate[1],
                factor = zoom_in ? 1.3 : 1/1.3,
                target_scale = scale * factor;
            if (target_scale === extent[0] || target_scale === extent[1] || target_scale > extent[1] || target_scale < extent[0]) { return false; }
            var clamped_target_scale = Math.max(extent[0], Math.min(extent[1], target_scale));
            if (clamped_target_scale != target_scale){
                target_scale = clamped_target_scale;
                factor = target_scale / scale;
            }
            x = (x - center[0]) * factor + center[0];
            y = (y - center[1]) * factor + center[1];
            if (zoom_in){
                x = x - 500;
            }else{
                x = x + 500;
            }
            d3.transition().duration(450).tween("zoom", function () {
                var interpolate_scale = d3.interpolate(scale, target_scale),
                    interpolate_trans = d3.interpolate(translate, [x,y]);
                return function (t) {
                    zoom.scale(interpolate_scale(t))
                        .translate(interpolate_trans(t));
                    ardamap.zoomedButton();
                };
            });
        }

这些计算效果很好。这里有两个按钮提升事件：

d3.select('#zoomplusbutton').on('click', function(){
    ardamap.zoomButton(true);
});
d3.select('#zoomminusbutton').on('click', function () {
    ardamap.zoomButton(false);
});

您也可以在 arda-maps.org 上找到代码更新。如果你有我修复真正去当前地图的中心，请随时编辑我的答案。我仍然有兴趣改进它！

【讨论】：