单击时旋转地球并居中

Question

我有这个代码：

    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时，地图消失了！

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

Answer 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是地图的新中点，如 [水平，垂直]它是使用旧地图中点和鼠标位置的差异（旧 - 新）计算的。

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