Why is scale only working the first time I doubleclick?

Question

I have a d3 globe, and I have it scaling up (zooming in) when I doubleclick it. However, the zoom only works the first time I doubleclick. After that, I see that the program is entering the dblclick function, but no zooming is taking place. This is probably a stupid question, but I would be grateful if anyone were able to tell me how to make the zoom happen each time the globe is doubleclicked.

    var width = 800,
    height = 800,
    centered;

        var feature;

        var projection = d3.geo.azimuthal()
            .scale(380)
            .origin([-71.03,42.37])
            .mode("orthographic")
            .translate([380, 400]);

        var circle = d3.geo.greatCircle()
            .origin(projection.origin());

        // TODO fix d3.geo.azimuthal to be consistent with scale
        var scale = {
          orthographic: 380,
          stereographic: 380,
          gnomonic: 380,
          equidistant: 380 / Math.PI * 2,
          equalarea: 380 / Math.SQRT2
        };

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


        var svg = d3.select("#globe").append("svg:svg")
            .attr("width", 800)
            .attr("height", 800)
            .on("dblclick", dblclick)
            .on("mousedown", mousedown);

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

        d3.json("simplified.geojson", function(collection) {

            g.append("g")
              .attr("id", "countries")
            .selectAll("path")
              .data(collection.features)
            .enter().append("svg:path")
              .attr("d", clip)
              .attr("id", function(d) { return d.properties.ISO3; })
              .on("mouseover", pathOver)
              .on("mouseout", pathOut)
              .on( "dblclick", dblclick)
              .on("click", click);

             feature = svg.selectAll("path");

            feature.append("svg:title")
              .text(function(d) { return d.properties.NAME; });


        });
...

    function dblclick(d) {
            var x, y, k;

          /*if (d && centered !== d) {
            var centroid = path.centroid(d);
            x = centroid[0];
            y = centroid[1];
            k = 4;
            centered = d;
          } else {
            x = width / 2;
            y = height / 2;
            k = 1;
            centered = null;
          }

          g.selectAll("path")
              .classed("active", centered && function(d) { return d === centered; });*/

          g.transition()
              .duration(750)
              //.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
              .attr("transform", "scale(1.5)");
              //.style("stroke-width", 1.5 / k + "px");
        }

Answer 1

I agree with Erik E. Lorenz (no way to link to Erik's answer, it appears). Right now you're setting the zoomscale in the line

.attr("transform", "scale(1.5)");

The problem is that each time you call dblclick(), you're "resetting" it to 1.5. It's not multiplying by 1.5 it's just getting set. D3 doesn't remember what it used to be. That's why the first time you call dblclick() it works (because you're transforming the scale to 1.5 from 1). But from then on, the scale is already transformed to 1.5 and you just keep setting the scale transform to 1.5.

You need to keep track of "how far you've zoomed". And to do that you need a variable that keeps it's value between calls to dblclick(). I'd do something like this:

/* given the structure of your code, you can probably just declare the
   variable before the function declaration. the function `dblclick` will
   have access to the variable via closure */

var zoomScale = 1;

/* then you can just do this */

function dblclick(d) {
    // you'll probably want to play with the math here
    // that is, "1.5" might not be best
    zoomScale = zoomScale * 1.5; // or some shorthand

    g.transition()
          .duration(750)
          .attr("transform", "scale(" + zoomScale + ")");
}

Answer 2

I think that that scale(1.5) might be the problem. Have you tried dynamically increasing that factor every time dblclick() is called?