为什么我的 .on("mouseover") 事件在页面刷新时触发，而不是在我“鼠标悬停”事件时触发

Question

我是 Javascript 和 d3 的新手，并试图让一个基本的“鼠标悬停”事件起作用。该事件似乎在我实际将鼠标悬停在元素上之前触发，但这让我感到困惑。

这是我的代码：

(function (d3) {

const svg = d3.select('svg');

const width = +svg.attr('width');
const height = +svg.attr('height');

const g = svg.append('g')
    .attr('transform',`translate(${width/2},${height/2})`);

const circle = g.append('circle')
  .attr('r', 30)
    .attr('fill', 'steelblue')
    .attr('stroke','black');

var data=[1,2,3,4,5,6];

d3.select('circle').on("mouseover", function(data) {
    console.log(data);
    svg.selectAll('circle').data(data)
        .enter().append('circle')
            .attr('r', data => data)
            .attr('cx', 20)
            .attr('cy', 20)
}(data));

}(d3));

当我将鼠标悬停在第一个圆圈上时，我期望绘制更多的圆圈，但是一旦我刷新页面，它们就会一起绘制。

正如我所说，我是一个新手，所以任何理解这一点的帮助将不胜感激。您可以提供/指向我的任何上下文背景也将不胜感激。

Answer 1

我不是 JavaScript 专家，但我认为您在事件声明中使用了自调用函数。

尝试删除函数声明中的(data) 部分

d3.select('circle').on("mouseover", function(data) {
   console.log(data);
   svg.selectAll('circle').data(data)
       .enter().append('circle')
           .attr('r', data => data)
           .attr('cx', 20)
           .attr('cy', 20)
});