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

Question

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

我发现国家徘徊的每一个例子(就像我上面提到的那样)的问题在于拖曳地球只能在海洋或陆地上进行.我想知道为什么会这样,但我试图实现自己,我现在意识到这是因为你可以选择让你的大约200'路径类=土地'元素在顶部(意味着悬停工作),或者你可以选择拥有您的'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);
  }));

这里的工作示例.

这就是你追求的吗？