Javascript 单击后旋转地球仪并使其居中

我有以下代码：

    d3.json("world-countries.json", function(collection) {
      feature = svg.selectAll("path")
          .data(collection.features)
          .enter().append("svg:path")
          .on("mouseover", function(d) { d3.select(this).style("fill",
                "#ffffff"); })
          .on("mouseout", function(d) { d3.select(this).style("fill",
                "#000000"); })
          .on("click", click)
          .attr("d", clip);

那么我的“点击”功能是

    function click() {
        var o1 = projection.invert(d3.mouse(this));
        var lat = o1[0]
        lon = o1[1];
        console.log([o1]);
        projection.origin([o1]);
        circle.origin([o1]);
        refresh();
    }

这是演示

当我点击svg时，地图消失了

---

您如何使地球仪旋转并以“点击”点为中心？

在您发布的示例中

你可以找到：

function mousemove() {
    if (m0) {
        var m1 = [d3.event.pageX, d3.event.pageY]
          , o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];
        projection.origin(o1);
        circle.origin(o1);
        refresh();
    }
}

您需要修改

o1

event.pageX

是水平鼠标位置（用于计算水平变化）

event.pageY

是鼠标的垂直位置

o1

是地图的新中点，如[水平，垂直] 它是使用旧贴图中点和鼠标位置的差值（新旧）计算的

var m1 = [d3.event.pageX, d3.event.pageY]
  , o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];

---

在您发布的示例中

你可以找到：

function mousemove() {
    if (m0) {
        var m1 = [d3.event.pageX, d3.event.pageY]
          , o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];
        projection.origin(o1);
        circle.origin(o1);
        refresh();
    }
}

您需要修改

o1

event.pageX

是水平鼠标位置（用于计算水平变化）

event.pageY

是鼠标的垂直位置

o1

是地图的新中点，如[水平，垂直] 它是使用旧贴图中点和鼠标位置的差值（新旧）计算的

var m1 = [d3.event.pageX, d3.event.pageY]
  , o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];

好的，我发现了这个，但是地球仪的旋转使轴倾斜，所以地球仪实际上是按时钟方向旋转的，y轴也会旋转。有没有一种方法可以使地球仪只在一个轴上设置动画？好的，我发现了这一点，但是地球仪的旋转会使轴倾斜，因此地球仪实际上会按时钟方向旋转，y轴也会旋转。有没有办法使地球仪仅在一个轴上设置动画？