如何取消d3.js

Question

這裏的鼠標懸停過渡是我的HTML結構

svg 
    g id=invisibleG 
    g 
     circle 
    g 
     circle 
    g 
     circle 

所以我想在任何特定的圓

svg 
     g id=invisibleG 
     g 
      circle --> radius is increased on hover.....decreased on hoverout 
      text 
     g 
      circle 
     g 
      circle 

這裏的懸停這樣的事情是代碼

.on("mouseover",function(){ 
    var r=d3.select(this).attr("r"); 
    d3.select(this).style('fill','tan') 
        .style('fill-opacity', '1') 
        .transition() 
        .duration(1000) 
        .attr("r",50); 
    d3.select(this).attr("stroke","blue") 
        .attr("stroke-width",4); 

}) 

.on("mouseout",function(){ 
    var r=d3.select(this).attr("prevRadius"); 
    d3.select(this).attr("r",r) 
        .attr("stroke-width",0) 
        .style('fill-opacity','0'); 

}); 

現在的問題是，當我將鼠標懸停在一個圓圈，並立即懸停出來的是明星的過渡在鼠標懸停的情況下不會立即停止。它完成了它的轉換，儘管事實上應該調用鼠標懸停事件，但半徑的大小卻增加了。而且任何轉換都應該停止。 請讓我知道問題及其解決方案。

Answer 1

如果你的d3版本足夠成熟（3.3+），他們似乎有添加選擇。 interrupt

所以，你也許可以嘗試：

.on("mouseout",function(){ 
    d3.select(this).interrupt(); 
    // if interrupt isn't supported in your version use below 
    //d3.select(this).transition().duration(0); 
}) 

否則，在相同的選擇較新的轉換將取消原有活動的轉變。所以你可以在mouseout上運行一個新的轉換，然後再轉換到復位值。如果你想凍結轉換，只需運行一個虛擬轉換來取消舊轉換。

進一步瞭解

如果你的目標是阻止[R（半徑）的只有轉變在其軌道上死看這個fiddle它使用的中斷。

如果你的目標是重置[R值或者你的鼠標懸停過程中所做的非過渡變化，看到這個fiddle

Answer 2

你只需要在這兩種情況下使用的過渡。從the documentation：

如果新的轉換運行在給定的元素上，它會隱式取消任何較舊的轉換，包括任何已安排但尚未運行的轉換。這允許新的轉換（例如響應新用戶事件的那些轉換）取代較舊的轉換，即使那些較舊的轉換已暫停或具有交錯延遲。

所以你的代碼需要是這樣的。

.on("mouseover", function() { 
    this.prevRadius = d3.select(this).attr("r"); 
    d3.select(this) 
     .style('fill','tan') 
     .style('fill-opacity', '1') 
     .transition() 
     .duration(1000) 
     .attr("r",50) 
    d3.select(this) 
     .attr("stroke","blue") 
     .attr("stroke-width",4); 

}).on("mouseout", function() { 

    d3.select(this) 
     .transition() 
     .attr("r", this.prevRadius) 
     .attr("stroke-width",0) 
     .style('fill-opacity','0'); 
}); 

演示here。