[Solved]-d3.js: How to deal with svg elements that are being appended on the same position, one on top of the other?-d3.js

There is unfortunately no easy way to do this -- in general, you would have to iterate over the existing elements, checking whether any of them is in the same position as the current element. You do however have a few other options.

Preprocess the data

Before drawing, iterate over your data and merge elements at the same position. You could add another attribute to the merged data that tells you to use another symbol, draw bigger circles or something like that.

Use transparency

The alternative would be to make the circles semi-transparent. This way, several circles at the same position would give less overall transparency, showing that there is more data at that position.

The latter solution would be the easiest to implement, as it only requires setting an attribute.