Javascript 为什么我的.on（“mouseover”）事件在页面刷新时触发，而不是在我'；鼠标盖'；事件

我是Javascript和d3的新手，正在尝试让一个基本的“mouseover”事件正常工作。事件似乎在我实际将鼠标移到元素上之前触发，但这让我感到困惑

这是我的代码：

(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));

我所期望的是，当我将鼠标移到第一个圆上时，会绘制更多的圆，然而，当我刷新页面时，它们都会一起绘制

---

正如我所说，我是一个新手，因此，任何帮助理解这一点都将不胜感激。如果您能为我提供任何上下文背景，我将不胜感激。

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

尝试删除函数声明中的

（数据）

部分

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)
});

---

这似乎不起作用-对于

console.log（data）

，我得到了

undefined

，这个错误：

uncaughttypeerror:svg.selectAll（…）.data（…）.enter不是SVGCircleElement的函数。（d3play.js:31）在svgcircleement。（d3.js:1524）

我明白了，您试图使用您声明的数据变量，当您编写时，

函数（数据）

它告诉程序，当调用该事件时，它将接收一个参数，因为您的变量在您的函数中已经可以访问，我会尝试从

函数（数据）

中删除

数据，并且仅从
函数（数据）
中删除，只保留
函数（）
，如果需要，请告诉我works@Chaz，此处提供给函数的参数（
data
）作为参考：
。on（“mouseover”，函数（data）
，表示选择中项目的基准。由于该选择没有绑定数据，
数据
将在此上下文中未定义。由于您只需要声明为
数据
的变量，因此无需将其指定为函数参数（因为此后
数据
将引用绑定基准）（
未定义
）而不是数组）。至于自调用。函数不需要自调用，因为所提供的函数是在事件上调用的-您希望将函数本身传递给事件处理程序，而不是函数的返回值。@AndrewReid感谢您的解释！现在这很有意义-我正在将我发现的我试着让这一切一起工作，但现在我明白了它在做什么。