javascript - d3.event.scale 在触摸设备的缩放上包含 NaN

Question

这段代码在PC网站上鼠标移动和滚轮移动时可以成功显示，但是当我想在移动webview中使用它时，只需移动它就可以成功。但是当我尝试缩放它时，d3.event.scale 将是 NaN，之后所有 event.scale 将是 NaN，我该如何解决这个问题？

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

;(function(w, d3, undefined){
    "use strict";

    var width, height;
    function getSize(){
        width = w.innerWidth,
        height = w.innerHeight;

        if(width === 0 || height === 0){
            setTimeout(function(){
                getSize();
            }, 100);
        }
        else {
            init();
        }
    }

    function init(){

        //Setup path for outerspace
        var space = d3.geo.azimuthal()
            .mode("equidistant")
            .translate([width / 2, height / 2]);

        space.scale(space.scale() * 3);

        var spacePath = d3.geo.path()
            .projection(space)
            .pointRadius(1);

        //Setup path for globe
        var projection = d3.geo.azimuthal()
            .mode("orthographic")
            .translate([width / 2, height / 2]);

        var scale0 = projection.scale();

        var path = d3.geo.path()
            .projection(projection)
            .pointRadius(2);

        //Setup zoom behavior
        var zoom = d3.behavior.zoom(true)
            .translate(projection.origin())
            .scale(projection.scale())
            .scaleExtent([100, 800])
            .on("zoom", move);

        var circle = d3.geo.greatCircle();

        var svg = d3.select("body")
            .append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .call(zoom)
                .on("dblclick.zoom", null);

        //Create a list of random stars and add them to outerspace
        var starList = createStars(500);

        var stars = svg.append("g")
            .selectAll("g")
            .data(starList)
            .enter()
            .append("path")
                .attr("class", "star")
                .attr("d", function(d){
                    spacePath.pointRadius(d.properties.radius);
                    return spacePath(d);
                });


        svg.append("rect")
            .attr("class", "frame")
            .attr("width", width)
            .attr("height", height);

        //Create the base globe
        var backgroundCircle = svg.append("circle")
            .attr('cx', width / 2)
            .attr('cy', height / 2)
            .attr('r', projection.scale())
            .attr('class', 'globe')
            .attr("filter", "url(#glow)")
            .attr("fill", "url(#gradBlue)");

        var g = svg.append("g"),
            features;

        //Add all of the countries to the globe
        d3.json("world-countries.json", function(collection) {
            features = g.selectAll(".feature").data(collection.features);

            features.enter().append("path")
                .attr("class", "feature")
                .attr("d", function(d){ return path(circle.clip(d)); });
        });

        //Redraw all items with new projections
        function redraw(){
            features.attr("d", function(d){
                return path(circle.clip(d));
            });

            stars.attr("d", function(d){
                spacePath.pointRadius(d.properties.radius);
                return spacePath(d);
            });
        }


        function move() {
            if(d3.event ){
                //var r=d3.event.scale;
                console.log(d3.event.sourceEvent.type);
                if(**d3.event.scale.toString() != "NaN"**)
                {

                    console.log(d3.event.scale);
                    //console.log(r);
                    console.log("hahahah");
                    var scale = d3.event.scale;
                    var origin = [d3.event.translate[0] * -1, d3.event.translate[1]];

                    projection.scale(scale);
                    space.scale(scale * 3);
                    backgroundCircle.attr('r', scale);
                    path.pointRadius(2 * scale / scale0);

                    projection.origin(origin);
                    circle.origin(origin);

                //globe and stars spin in the opposite direction because of the projection mode
                    var spaceOrigin = [origin[0] * -1, origin[1] * -1];
                    space.origin(spaceOrigin);
                    redraw();
            }
            }
        }


        function createStars(number){
            var data = [];
            for(var i = 0; i < number; i++){
                data.push({
                    geometry: {
                        type: 'Point',
                        coordinates: randomLonLat()
                    },
                    type: 'Feature',
                    properties: {
                        radius: Math.random() * 1.5
                    }
                });
            }
            return data;
        }

        function randomLonLat(){
            return [Math.random() * 360 - 180, Math.random() * 180 - 90];
        }
    }

    getSize();

}(window, d3));

Answer 1

此问题在 2.5.0 版本的 d3 中已解决，请参阅 https://github.com/d3/d3/issues/341 。检查您的 d3 版本。