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

Question

Any help would be greatly appreciated.

Basically, the mouseover was working fine until I added a transition to the line chart. The transition takes the circles' opacity 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 throws the following error

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

This same issue was happening on a bar chart I just created and simply stopping the method chaining and starting it again fixed the problem. That's why in this example I've stopped the method chaining and started it again with "dots.on('mouseover..."

Answer 1

As soon as you call .transition(), the selection you have becomes a transition. This is what you save in dots and then try to call .on() on. Instead, save the selection and set the transition and event handlers 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
  });