Question

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

我发现的每个国家徘徊的例子（如我上面提到的那个）的问题在于，拖曳地球只能在海洋或陆地上进行。我想知道为什么会这样，但是我试图实现自己，我现在意识到它是因为你可以选择让你的大约200道路的班级=土地＆＃39;顶部的元素（意思是悬停的作品），或者您可以选择让您的路径类=前景/身体等＃39;元素在顶部（意味着悬停不会起作用，因为侦听器应用于前景后面的陆地元素）。

有没有人知道解决这个问题的方法？我尝试将一个新的拖拽监听器应用到我的每个土地元素中，但无法使其正常工作，并且我不确定无论如何都要有多个竞争拖动处理程序。

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

Answer 1

在你链接到的第一个例子中，我只是复制了＃34; land＆＃34;在＆＃34; ocean＆＃34;上拖动处理程序它完美无缺：

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。

这就是你追求的目标吗？

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

1 个答案: