1

我正在尝试显示带有气泡的世界地图。地图和气泡完美显示。但是在缩放地图时，气泡也在缩放。关于如何在缩放时最小化/减小气泡半径的任何想法。这可以使用CSS完成还是我们需要应用js？这就是我处理缩放功能的方式。

function Zoom(args) {
        $.extend(this, {
                $buttons:   $(".zoom-button"),
                scale:      { max: 50, currentShift: 0 },
                $container: args.$container,
                datamap:    args.datamap
        });
        this.init();
}

Zoom.prototype.init = function() {
        var paths = this.datamap.svg.selectAll("path"),
            subunits = this.datamap.svg.selectAll(".datamaps-subunit");

        // preserve stroke thickness
        paths.style("vector-effect", "non-scaling-stroke");

        // disable click on drag end
        subunits.call(
                d3.behavior.drag().on("dragend", function() {
                    d3.event.sourceEvent.stopPropagation();
                })
        );
        this.scale.set = this._getScalesArray();
        this.d3Zoom = d3.behavior.zoom().scaleExtent([ 1, this.scale.max ]);
        this.listen();
};

Zoom.prototype.listen = function() {
        this.$buttons.off("click").on("click", this._handleClick.bind(this));
        this.datamap.svg
                .call(this.d3Zoom.on("zoom", this._handleScroll.bind(this)))
};

Zoom.prototype._handleScroll = function() {
        var translate = d3.event.translate,
            scale = d3.event.scale,
            limited = this._bound(translate, scale);
        this.scrolled = true;
        this._update(limited.translate, limited.scale);
};

Zoom.prototype._handleClick = function(event) {
        var direction = $(event.target).data("zoom");
        this._shift(direction);
};

Zoom.prototype._shift = function(direction) {
        var center = [ this.$container.width() / 2, this.$container.height() / 2 ],
            translate = this.d3Zoom.translate(), translate0 = [], l = [],
                view = {
                        x: translate[0],
                        y: translate[1],
                        k: this.d3Zoom.scale()
                }, bounded;
        translate0 = [
                (center[0] - view.x) / view.k,
                (center[1] - view.y) / view.k
        ];
        view.k = this._getNextScale(direction);
        l = [ translate0[0] * view.k + view.x, translate0[1] * view.k + view.y ];
        view.x += center[0] - l[0];
        view.y += center[1] - l[1];
        bounded = this._bound([ view.x, view.y ], view.k);
        this._animate(bounded.translate, bounded.scale);
};

Zoom.prototype._bound = function(translate, scale) {
        var width = this.$container.width(),
            height = this.$container.height();
        translate[0] = Math.min(
                (width / height)  * (scale - 1),
                Math.max( width * (1 - scale), translate[0] )
        );
        translate[1] = Math.min(0, Math.max(height * (1 - scale), translate[1]));

        return { translate: translate, scale: scale };
};

Zoom.prototype._update = function(translate, scale) {
        this.d3Zoom
                .translate(translate)
                .scale(scale);
        this.datamap.svg.selectAll("g")
                .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
};

Zoom.prototype._animate = function(translate, scale) {
        var _this = this,
        d3Zoom = this.d3Zoom;
        d3.transition().duration(350).tween("zoom", function() {
                var iTranslate = d3.interpolate(d3Zoom.translate(), translate),
                    iScale = d3.interpolate(d3Zoom.scale(), scale);

                return function(t) {
                        _this._update(iTranslate(t), iScale(t));
                };
        });
};

任何帮助将不胜感激。

4

0 回答 0