Question

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

但是，我收到以下错误消息＆＃34; Uncaught TypeError：无法读取属性＆＃39; y＆＃39;未定义＆＃34; ，我不能理解为什么。

我的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中的数组项数，则会发生这种情况。

D3鼠标悬停在小倍数上

1 个答案: