d3.js鼠标悬停重叠的圆圈

Question

我目前正在尝试解决重叠圆圈的问题，其中一些较大的圆圈会阻止较小圆圈上的鼠标悬停事件。以下是我到目前为止所展示的问题：http://bl.ocks.org/lilyc5459/raw/a35687613ab0f4991f37/

可以在此处找到代码：http://bl.ocks.org/lilyc5459/a35687613ab0f4991f37

非常感谢任何关于如何解决这个问题的想法！感谢。

Answer 1

您应该按padeedits字段降序对收到的数据进行排序，这样较大的圆圈会在较小的圆圈之前插入，并且不会有任何重叠。

所以以这种方式修改你的代码：

  ...
  svg.selectAll(".loading").remove();

  // code block for inserting

  data.sort(function(a,b) {
    if (a.pageedits > b.pageedits)
      return -1;
    if (a.pageedits < b.pageedits)
      return 1;
    return 0;
  });

  // end of block

  svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle") 
  ...