Question

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

然而，当我更新圆圈的位置/颜色（那些是随机生成的值）时，鼠标悬停事件已经消失。我认为这是因为d3用新的圆圈替换了旧圆圈，并且我没有在更新函数中定义我的mouseover eventlistener，所以我只是从'initialize'代码中复制它。但后来发生了一些奇怪的事情。我在控制台中得到了一个' Uncaught TypeError：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);   
 });
});

我没想错，因为我完全像以前那样做了：我选择了所有的圈子，设置了他们的属性，并用.on（）定义了一个eventlistener，但它没有用。

我能够通过定义一个完全如上所述的函数来解决这个问题，并在我的'update'代码的末尾调用它。这是功能：

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

所以我似乎可以更新被调用函数中对象的eventlisteners，但不能在'click'事件提供的回调函数中更新？

问题：为什么会这样？这是完全相同的选择，但为什么“硬”方式起作用，“简单”方式不起作用？

Answer 1

您正在第一种情况下在.transition()之后添加事件监听器。在“硬”情况下，您将事件侦听器分配给选择而不进行转换。我认为它不能过渡到事件监听器。

尝试在调用.transition()之前注册事件监听器，看看它是否适合您。

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

1 个答案: