plotly rangeslider如何确定是否选择了范围

Question

需要知道在 rangeslider 上拖动完成的时间。添加 'dragend' 上的 sliderDiv 事件仅偶尔产生通知。收听 plotly_relayout 给出了太多事件。

Answer 1

我认为尚不支持 "plotly_rangeslider_dragend" 之类的活动。所以你必须使用一个解决方法。

要确定 rangeslider 事件，您可以使用 "plotly_relayout" 并像下面的代码一样查看事件数据对象：

var timer=undefined;
var plotlyRelayoutEventFunction=function(eventdata){
  if( Object.prototype.toString.call(eventdata["xaxis.range"]) === '[object Array]' ) {
    console.log("rangeslider event!!");

    if(timer!==null){
      //timer is running: stop it
      window.clearTimeout(timer);
    }

    timer = window.setTimeout(function(){ 
      //fire end event
      console.log("rangeslider event ENDS");

      //reset timer to undefined
      delete timer;
      timer=undefined;
    }, 800);
  }
}

第一个 if 语句检查事件数据字段 "xaxis.range" 是否为数组。如果是，则为 rangeslider 事件。（相比之下，缩放事件与此类似，但它不是数组）。

要确定 rangeslider 事件的结束，您可以使用计时器。如果新事件在 800 毫秒的时间范围内进入，则它还没有结束，计时器将重新启动。如果 800 毫秒结束并且其 rangeslider-end-event 中没有新事件出现。

当然这不是完整的解决方案，因为用户可以等待 800 毫秒而不释放滑块。所以你也必须使用一些鼠标事件来构建一个真正正确的 rangeslider-end-event。希望这会引导您朝着正确的方向前进。我觉得有很多方法可以解决。

这是 jsfiddle 中的一个完整示例，它基于 rangesliders 的 plotly 网站示例，并向控制台触发 rangeslider-end-event：https://jsfiddle.net/7d03n2k1/

编辑：

我更新了我的代码：https://jsfiddle.net/7d03n2k1/1/ 因为 window.setTimout(...) returns 一个 Id 而没有对象代码是错误的。

plotly rangeslider如何确定是否选择了范围

plotly rangeslider how to determine if range is selected

javascript

plotly

rangeslider