события mouseover и Mouseout над svg.circle

Question

Идея реализации - это всплывающая подсказка, которая будет отображаться при наведении курсора на элемент круга svg на графике d3. При наведении курсора на круг радиус этого круга увеличивается с 1 до 5. Проблема, которую я пытаюсь решить, заключается в том, что при наведении курсора на круг, который находится внутри радиуса (с 1 по 5) текущего наведенного круга, он не будет отображаться, потому что мышь никогда не покидает текущий круг. Есть идеи об обходе здесь? Код:

svg.selectAll("dot")
                .data(serverData)
                .enter().append("circle")
                .attr('opacity',1)
                .attr("r", 1)
                .attr("stroke-width",2)
                .on("mouseover", function(d) {
                    // this.setAttribute('opacity',1)
                    this.setAttribute('r',5);
                    console.log("datum trenutnog kruga: "+moment(d.calc_month).format('YYYY-MM-DD'))
                    return tooltip.style("visibility", "visible").html("<span class='pull-left' >medijan:"+Math.round(d.median*100)/100+"</span>"+
                        "<br/><span class='pull-left' >datum: "+moment(d.calc_month).format('YYYY-MM-DD')+"</span>");
                })

                // we move tooltip during of "mousemove"

                .on("mousemove", function(event) {
                    return tooltip.style("top", (event.pageY - 30) + "px")
                        .style("left", event.pageX + "px");
                })

                // we hide our tooltip on "mouseout"

                .on("mouseout", function() {
                    this.setAttribute('r',1);
                    return tooltip.style("visibility", "hidden");
                });