D3 mouseover on small multiples

Question

I'm trying to display a circle on each small multiple when the user interact with the visualization by setting a mousemove function. I've set my code here : http://plnkr.co/edit/7lgyZgIoNIpmarYx8iUH .

However, I got the following error message "Uncaught TypeError: Cannot read property 'y' of undefined" , and I'm not unable to understand why.

My mousemove function is defined as following:

  var mouseover = function() {
    circle.attr('opacity', 1);
    d3.selectAll('.static-year').classed('hidden', true);
    return mousemove.call(this);
  }

  var mousemove = function() {
    var year, date, index;
      year = x.invert(d3.mouse(this)[0]).getFullYear();
      date = formatTime.parse('' + year);
    index = 0;
    circle
      .attr('cx', x(date))
      .attr('cy', function(d) {
        index = bisect(d.value, date, 0, d.value.length - 1);
        return y(d.value[index].y);
      });
  }

  var mouseout = function() {
    d3.selectAll('.static-year').classed('hidden', false);
    circle.attr('opacity', 0);
}

Does someone with a better knowledge of D3 has any idea why?

Thank you!

Answer 1

The error you're getting is a regular JavaScript error rather than a D3 error. In the code you've posted the only place I can see that could throw it is:

.attr('cy', function(d) {
    index = bisect(d.value, date, 0, d.value.length - 1);
    return y(d.value[index].y);
 });

This will occur if index is greater than the number of array items in d.value .