D3：當我添加一個轉換，我的鼠標懸停停止工作...爲什麼？

Question

任何幫助將不勝感激。

基本上，mouseover工作正常，直到我添加了一個轉換到折線圖。過渡將圓的不透明度從零變爲一。

var dots = svg.selectAll('circle') 
    .data(data) 
    .enter() 
    .append('svg:circle') 
    .attr('cx', function(d, i){ return ((width - tickOffset)/(data.length - 1)) * i; }) 
    .attr('cy', function(d){ return y(d.value); }) 
    .attr('r', 4) 
    .attr('class', 'circle') 
    .style('opacity', 0) 
    .transition() 
    .duration(circleAnimation) 
    .delay(function(d,i){ return i * (circleAnimation/4); }) 
    .style('opacity', 1); 

dots.on('mouseover', function(d, i){ 
    // show tooltip 
}) 
.on('mouseout', function(d, i){ 
    // hide tooltip 
}); 

當我執行過渡，控制檯引發以下錯誤

TypeError: 'undefined' is not a function (evaluating 'dots.on') 

同樣的問題發生的事情我剛剛創建了一個線圖上簡單地停止方法鏈，並開始再次固定的問題。這就是爲什麼在這個例子中，我已經停止了方法鏈接，並用「dots.on（'mouseover ...'）重新啓動它。

Answer 1

只要您撥打.transition()，您所選擇的選項就會變成一個轉換。您在dots保存，然後嘗試調用.on()上相反，保存選擇並設置過渡和事件處理程序就可以了。！

var dots = svg.selectAll('circle') 
    .data(data) 
    .enter() 
    .append('svg:circle') 
    .attr('cx', function(d, i){ return ((width - tickOffset)/(data.length - 1)) * i; }) 
    .attr('cy', function(d){ return y(d.value); }) 
    .attr('r', 4) 
    .attr('class', 'circle') 
    .style('opacity', 0); 

dots.transition() 
    .duration(circleAnimation) 
    .delay(function(d,i){ return i * (circleAnimation/4); }) 
    .style('opacity', 1); 

dots.on('mouseover', function(d, i){ 
    // show tooltip 
    }) 
    .on('mouseout', function(d, i){ 
    // hide tooltip 
    });