Question

我在D3中有一个事件监听器，每当用户在图表上悬停时，我们就会从正在悬停的点上获取数据，并更新页面上的各种图例。

这是代码（它是更大的Backbone应用程序的一部分）：

var Hover = Component.extend({

events: function () {
  if (this.modernizr.touch) {
    return {
      'touchstart .hover': 'onTouchStart'
    };
  } else {
    return {
      'mousemove .hover': 'onMouseMove'
    };
  }
}, ...

onMouseMove: function (e) {
  var offset = this.graph.graphWrapper.offset();
  var scaleFactor = this.graph.scaleFactor();
  var x = (e.pageX - offset.left) / scaleFactor - this.margin.left;
  var y = (e.pageY - offset.top) / scaleFactor - this.margin.top;

  this.attachBodyListener('mousemove');
  this.selectPoint(x, y);
  return false;
},

selectPoint: function (x, y) {
  // do various calculations etc here. 
}

});

这适用于相当稀疏的图形，但在密集的图形上，我发现当我移动鼠标时，事件被触发数百次，这使得它感觉非常迟钝。

有没有办法可以为“鼠标移动结束”或类似事件设置事件？或者我可以限制事件，而不会设置延迟并使图表因为其他原因而感到滞后？

Answer 1

因为你有Underscore，

    onMouseMove: _.throttle(function (e) {
        // ...
    }, 1000),

d3.js - 悬停时节流事件？

1 个答案: