轻轻缩放到D3地图的中心

Question

我创建了 interactive map 。此地图可以通过按钮进行缩放。这些按钮已经可以工作，但我不喜欢当前的风格。通过点击按钮，地图有点摇晃，它不会感觉用户体验。我想轻轻地放大地图的中心。

此处放大按钮上的代码：

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代码。

Answer 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上找到代码更新。如果您已经确定要转到当前地图的中心，请随时编辑我的答案。我仍然有兴趣改进这个！