Javascript d3-无法在eventhandle函数中定义新的EventListener？

我正在做一个概念验证，它描述了svg元素中的一些圆圈，当我点击svg元素时，这些圆圈会移动并改变颜色。一切正常。我还想添加一个鼠标悬停事件，例如将圆圈的颜色更改为红色。这也奏效了

然而，当我更新圆圈的位置/颜色（这些是随机生成的值）时，鼠标悬停事件消失了。我想这是因为d3用新的圆圈替换了旧的圆圈，并且我没有在更新函数中定义mouseover eventlistener，所以我只是从“initialize”代码中复制了它。但后来发生了一些奇怪的事情。我在控制台中得到一个“UncaughtTypeError:undefined不是函数”，eventlistener无法工作。代码如下：

svg2.on("click", function(){
svg2["color"] = d3.rgb(Math.random()*256,Math.random()*256,Math.random()*256);

var circles = svg2.selectAll("circle");
console.log(circles);
circles.transition()
.duration(500)
.ease("circle")
.style("fill",svg2["color"])
.attr("cx",function(d,i){
  var val = (Math.random()<0.5)?-Math.random()*50:Math.random()*50;
  if(val+d[0]-d[2] >w2 || val+d[0]-d[2]<0) return d[0];
  else return d[0]+val;
})
.attr("cy",function(d,i){
  var val = (Math.random()<0.5)?-Math.random()*50:Math.random()*50;
  if(val+d[1]+d[2] > h2 || val+d[1]-d[2]< 0) return d[1];
  else return d[1]+val;
})
.attr("r",function(d){
return d[2];
})
///////// ERROR CAUSED BELOW //////////////
.on("mouseover",function(){
 d3.select(this).style("fill",svg2.color);   
 });
});

看来我可以在被调用函数中更新对象的eventlisteners，但不能在“click”事件提供的回调函数中更新

---

问：这到底是为什么？这是完全相同的选择，但为什么“硬”方法有效，而“简单”方法无效？

在第一种情况下，您将在

.transition（）

之后添加事件侦听器。在“硬”情况下，您将事件侦听器分配给选择，而无需转换。我认为转换成事件监听器是行不通的

---

在调用

.transition（）

之前，尝试注册事件侦听器，看看这是否对您有效。

要详细说明这个答案，转换也有

.on（）

函数，但用于不同的目的和不同的事件。您将事件侦听器附加到转换，而不是元素。哇，你们都完全正确！我的两个代码片段确实有所不同，因为在加载页面时，我没有使用

.transition（）

。我之所以把它放在链中这么早，是因为大多数教程都是这样做的，我不认为顺序会成为一个问题，但现在很明显，顺序对某些函数来说确实很重要。谢谢

function updateListeners(circles){
    circles.on("mouseover",function(){
         d3.select(this).style("fill","red");   
    })
    .on("mouseout",function(){
         d3.select(this).style("fill",svg2.color);   
    })
}