Question

我有一个d3地球仪，当我双击它时我会放大（放大）。但是，缩放仅在我第一次双击时才有效。之后，我看到程序正在进入dblclick功能，但没有进行缩放。这可能是一个愚蠢的问题，但如果有人能够告诉我每次双击地球时如何进行缩放，我将不胜感激。

    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

我同意Erik E. Lorenz（没有办法链接到Erik的答案，它出现了）。现在，您正在设置行

中的缩放比例

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

问题在于，每次拨打dblclick()时，您都会重置＆＃34;重置＆＃34;它到1.5。它不会乘以1.5它只是设置。 D3不记得它曾经是什么。这就是为什么第一次调用它dblclick()时它会起作用（因为你将比例从1转换为1.5）。但从那时起，比例已经转换为1.5，你只需将比例变换设为1.5。

您需要跟踪＆＃34;您放大了多远＆＃34;。要做到这一点，你需要一个变量来保持它在调用dblclick()之间的价值。我做这样的事情：

/* 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

我认为scale(1.5)可能是问题所在。您是否尝试每次调用dblclick()时动态增加该因子？

为什么缩放仅在我第一次双击时才起作用？

2 个答案: