javascript - ".on"函数的顺序在 D3 中重要吗？

Question

我有一个圆圈，当它被点击时，它的颜色应该变成红色。我还想在同一次点击中调用第二个功能:“第二次点击功能”。

我的问题是，在这个阶段只有第二个“.on”执行，但忽略了第一个“.on”，也就是说，颜色没有改变。

 var newcircle = svg.append("circle")
     .data(nodes)
     .attr("cx", 33)
     .attr("cy", 44)
     .attr("r", 33)
     .style("fill", "red")   
     .on("click", function(){d3.select(this).style("fill", "green");})   
     .on("click", function(d) { "second click function" } )

如果我将“.on”函数的顺序更改为:

 var newcircle = svg.append("circle")
     .data(nodes)
     .attr("cx", 33)
     .attr("cy", 44)
     .attr("r", 33)
     .style("fill", "red")        
     .on("click", function(d) { "second click function" })  
     .on("click", function(){d3.select(this).style("fill", "green");})

然后它只改变颜色，但不做“第二次点击功能”。

谁能帮帮我？

Answer 1

作为https://github.com/d3/d3-selection/blob/master/README.md#selection_on解释，

If an event listener was previously registered for the same typename on a selected element, the old listener is removed before the new listener is added.

但是解决问题很简单；只需将所有逻辑添加到一个函数中即可。

.on("click", function(){
  d3.select(this).style("fill", "green");
  "second click function"
});