修改

Question

D3 canvas globe的一个例子： http://bl.ocks.org/mbostock/4183330

我要做的是点击一个国家，让地球旋转，以便国家以地球为中心。

如何在国家/地区形状中添加eventlistener（D3的.on或jQuery的.bind或plain addEventListener），以便找出我点击的国家/地区？

思想？

Answer 1

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

This example uses 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很好地解释了用二维表示法导航3d空间的困难。

D3画布全球鼠标活动

2 个答案:

修改

完整示例

重要部分

参考