单击时旋转和居中地球答案

【问题标题】：rotate and center globe on click单击时旋转和居中地球
【发布时间】：2012-06-07 05:13:13
【问题描述】：

我有这个代码：

    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();
    }

这里是演示http://bl.ocks.org/2876083

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

您将如何做到这一点，以使地球旋转并以“点击”点为中心？

【问题讨论】：

好的，我找到了这个bl.ocks.org/1392560，但是地球的旋转使轴倾斜，因此地球实际上是顺时针旋转，y 轴也旋转。有没有办法让地球只在一个轴上动画？

标签： javascript d3.js

【解决方案1】：

在您发布的示例中 http://bl.ocks.org/johan/1392560

你可以找到：

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 是地图的新中点，如 [horizontal,vertical] 它是使用旧地图中点和鼠标位置的差异 (old - new) 计算得出的。

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

【讨论】：