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版d3中解决，请阅读https://github.com/d3/d3/issues/341。检查你的d3版本。