canvas - D3 画布地球鼠标事件

Question

D3 画布地球示例：http: //bl.ocks.org/mbostock/4183330

我正在尝试做的是单击一个国家并让地球旋转，以便该国家以地球为中心。

如何将事件监听器（D3 的 .on 或 jQuery 的 .bind 或普通的 addEventListener）添加到国家形状，以便确定我点击了哪个国家？

想法？

Answer 1

您链接到的示例是使用 HTML5 画布渲染器。据我所知，它不支持将点击事件绑定到特定区域。

此示例使用 SVG，它的性能不高，但允许您将事件绑定到每个国家/地区。

就像是，

svg.selectAll(".countries path")
.on('click', function(d, i) {
   /* perform whatever logic here related to country associated with d */
});

在这种情况下，要旋转地球，您需要查看设置投影的旋转。

希望这可以帮助。

编辑

关于使用画布，如果您的投影支持它，可以使用d3.mouse包装器和d3.geo.projection().invert来计算鼠标指针的投影坐标。

那时，您必须弄清楚您的观点是否在任何国家“内部”。那可能更难。

Answer 2

感谢 John Ledbetter 的回答，我能够创建一个地球旋转到用户单击点的工作演示。

它没有解决问题的第二部分，突出显示用户点击的国家。但是下面的代码确实暴露了经度/纬度，因此可以从这里构建该解决方案。

完整示例

这是当用户在CodePen上单击透明 3d 地球时旋转到某个点的完整示例。

重要部分

当用户点击地球上的一个位置时，进行地球旋转的重要部分是：

var canvas = d3.select("#map").append("canvas");

canvas.on("mousedown.drag", onMapClick);

function onMapClick() {
  rotateMap(projection.invert(d3.mouse(this)));
}

function rotateMap(p) {
  d3.transition()
    .duration(850)
    .tween("rotate", function() {
        var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);

        return function(t) {
          projection.rotate(r(t));
          redrawMap();
        };
      })
    .transition();
}

用户点击使用projection.invert(d3.mouse(this)).

旋转计算函数在该d3.interpolate(projection.rotate(), [-p[0], -p[1]])行中创建。

最后，地球旋转本身发生在使用projection.rotate(r(t))在线的补间中。

参考

关于地图导航的主题，Jason Davie 的文章Rotate the World很好地解释了用 2d 表示导航 3d 空间的困难。