D3: When I add a transition, my tip stops working ... why?

Question

Any help would be greatly appreciated.

Basically, the mouse worked just fine until I added the transition to a line chart. The transition takes the opacity of the circles from zero to one.

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 }); 

When I implement the transition, the console gives the following error

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

The same problem occurred on the chart that I just created, and just stopped the method chain and started fixing it again. So in this example, I stopped the method chain and started it again with "dots.on (" mouseover ... "

Answer 1

As soon as you call .transition() , the transition you select becomes the transition. This is what you save in dots , and then try calling .on() on. Instead, save the selection and set transition handlers and events on it:

 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 });