D3鼠标移到小倍数上

D3 mouseover on small multiples

本文关键字：鼠标 D3      更新时间：2023-09-26

当用户通过设置鼠标移动功能与可视化交互时，我试图在每个小倍数上显示一个圆圈。我在这里设置了代码:http://plnkr.co/edit/7lgyZgIoNIpmarYx8iUH。

然而，我得到以下错误消息"Uncaught TypeError: Cannot read property 'y' of undefined"，我不是无法理解为什么。

我的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的人知道为什么吗?

谢谢!

你得到的错误是一个常规的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中的数组项数，则会发生这种情况。

相关文章：