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中數組項的數量，則會發生這種情況。