d3.js mouseover overlapping circles

Question

I am currently trying to solve a problem with overlapping circles where some larger circles prevent the mouseover event on smaller ones. Here is what I have so far to demonstrate the problem: http://bl.ocks.org/lilyc5459/raw/a35687613ab0f4991f37/

The code can be found here: http://bl.ocks.org/lilyc5459/a35687613ab0f4991f37

Any ideas as to how to solve this is greatly appreciated! Thanks.

How would you like the graphic to behave? If one circle overlaps another, you need a well-defined decision rule that decides which circle will be 'mouseovered'. — RobinL, Apr 25 '15 at 14:06
Have a look at these: http://stackoverflow.com/questions/13595175/updating-svg-element-z-index-with-d3, http://stackoverflow.com/questions/14167863/how-can-i-bring-a-circle-to-the-front-with-d3 — dekkard, Apr 25 '15 at 14:07
@RobinL: essentially, I would like the smaller circles to always be in front of the larger ones so it can be moused over. — Lily, Apr 25 '15 at 14:10
@RobinL: that totally did it. I should have thought of that haha. Thanks! — Lily, Apr 25 '15 at 15:51

score 1 · Accepted Answer · answered Apr 25 '15 at 14:32

You should sort the received data by padeedits field in descending order, so the bigger circles are inserted before smaller and there won't be any overlapping more.

So modify your code this way:

  ...
  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") 
  ...

It is a solution that works, although we might occasionally like to keep an item visually on top while still firing off the event — David Cian, Sep 19 '22 at 15:47

d3.js mouseover overlapping circles

1 Answers1