D3鼠标悬停在小倍数上

Question

当用户通过设置mousemove函数与可视化进行交互时，我试图在每个小的倍数上显示一个圆圈。 我在这里设置了代码： http : //plnkr.co/edit/7lgyZgIoNIpmarYx8iUH 。

但是，我收到以下错误消息“ Uncaught TypeError：无法读取未定义的属性'y'” ，并且我无法理解原因。

我的mousemove函数定义如下：

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

对D3有更好了解的人是否知道为什么？

谢谢！

Answer 1

您遇到的错误是常规的JavaScript错误，而不是D3错误。 在代码中，您发布的唯一可以看到的地方是：

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

如果index大于d.value中数组项的数量，则会发生这种情况。