d3 地球与国家悬停加上从陆地旋转/缩放

Question

我正在尝试实现一个带有国家悬停的 d3 地球（例如 http://bl.ocks.org/KoGor/5994804），无论鼠标在地球上的哪个位置（例如 http://marcneuwirth.com/blog/2012/06/24/creating-the-earth-with-d3-js），它也可以实现旋转/缩放（例如 http://marcneuwirth.com/blog/2012/06/24/creating-the-earth-with-d3-js）

我发现的每个国家悬停示例（就像我上面提到的那个）的问题是，拖动地球只能在海洋或陆地上进行。我想知道为什么会这样，但是在尝试实现自己之后，我现在意识到这是因为您可以选择将大约 200 个“路径 class=land”元素放在顶部（意味着悬停工作），或者您可以选择拥有'path class=foreground/body etc' 元素在顶部（意味着悬停不起作用，因为侦听器被应用于前景后面的土地元素）。

有人知道解决这个问题的方法吗？我尝试为我的每个土地元素应用一个新的拖动侦听器，但无法使其正常工作，并且不确定拥有多个相互竞争的拖动处理程序是否是个好主意。

真的很感激任何关于解决问题的好方法的见解 - 也许有人甚至知道一些成功结合这两种行为的例子？谢谢！

Answer 1

在您链接到的第一个示例中，我只是在“海洋”上复制了“陆地”拖动处理程序，它完美地工作：

svg.append("path")
  .datum({type: "Sphere"})
  .attr("class", "water")
  .attr("d", path)
  .call(d3.behavior.drag()
  .origin(function() { var r = projection.rotate(); return {x: r[0] / sens, y: -r[1] / sens}; })
  .on("drag", function() {
    var rotate = projection.rotate();
    projection.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]);
    svg.selectAll("path.land").attr("d", path);
    svg.selectAll(".focused").classed("focused", focused = false);
  }));

工作示例here。

这就是你所追求的吗？