D3.js - почему мышь и мышь были выпущены для каждого дочернего элемента?

Я использую d3.js для создания круга svg с текстовым логотипом в середине круга. Вот результат svg.

<g id="main">
  <circle r="114" fill="#F0E8D0"></circle>
  <text text-anchor="middle">The movie title</text>
</g>

Вот d3.js

var circles = [{r: innerRadius}];
svg.append("g").attr("id","main");


svg.select("#main").selectAll("circle")
.data(circles).enter()
.append("circle")
.attr("r",function(d){return d.r})
.attr("fill","#F0E8D0");

svg.select("#main").append("text")
.attr("text-anchor", "middle")
.text(function(){ return "The movie title";});

Я также хочу запустить некоторые анимации, когда наведите курсор мыши и оставьте круг.

svg.select("#main")
.on("mouseover",function(){
  //code for transition
}).on("mouseout",function(){
  //code for transition
})

Итак, проблема такова: Когда мышь перемещается в круг, анимация срабатывает, как ожидалось, однако, когда мышь касается текстового элемента, происходит событие mouseout (мышь, выходящая из круга), за которым следует событие mouseover (мышь, входящая в текстовый элемент), который не является желательно.

Кажется, что обратные вызовы анимации будут вызываться, когда мышь касается любого дочернего элемента тега "< g".

Мне не нужна анимация, когда мышь касается текстового элемента. Как я могу это сделать?

Ответ 1

Вы можете запретить элементу text принимать события мыши (и, таким образом, запускать событие мыши, когда вы наводите на него курсор мыши), установив pointer-events в none:

svg.select("#main").append("text")
   .attr("text-anchor", "middle")
   .attr("pointer-events", "none")
   .text(function(){ return "The movie title";});

Возможно, вы также захотите установить события в circle, а не на элементе g:

svg.select("#main").selectAll("circle")
   .data(circles).enter()
   .append("circle")
   .attr("r",function(d){return d.r})
   .attr("fill","#F0E8D0")
   .on("mouseover",function(){
     //code for transition
   })
   .on("mouseout",function(){
     //code for transition
   })

Ответ 2

Альтернативным решением является использование mouseenter и mouseleave вместо mouseover и mouseout.

mouseenter аналогичен mouseover, за исключением того, что он не запускается, когда указатель (мышь) перемещается из одного физического пространства (в этом случае) пользователя (в этом случае) в его физическое пространство (текст в этом случае) пространство.

То же рассуждение для "mouseleave"

Источник: https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter и https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave