密谋rangelider如何确定是否选择了范围 [英] plotly rangeslider how to determine if range is selected

问题描述

需要知道何时在游标滑块上拖动.新增中 SliderDiv上的事件仅偶尔产生 通知.在plotly_relayout上收听会产生太多 事件.

Needs to know when dragging on a rangeslider is done. Adding an event on the sliderDiv on 'dragend' only yields occasional notification. Listening on the plotly_relayout gives too many events.

推荐答案

我认为尚不支持"plotly_rangeslider_dragend"之类的事件.因此，您必须使用一种解决方法.

I think an event like "plotly_rangeslider_dragend" is not supported yet. So you must use a workaround.

要确定Rangeslider事件，您可以使用"plotly_relayout"并像下面的代码一样查看eventdata-Object:

To determine a rangeslider event you can use "plotly_relayout" and look into the eventdata-Object like the code below:

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语句检查eventdata字段"xaxis.range"是否为数组.如果是，则为Rangeslider事件. (相反，zoom-event与之相似，但不是数组).

The first if statement checks if the eventdata field "xaxis.range" is an array. If yes, it is an rangeslider event. (in contrast the zoom-event is similar to that but its not an array).

要确定Rangeslider事件的结束，可以使用计时器.如果新事件在800毫秒的时间范围内出现，则该事件不会结束，计时器将重新启动.如果800毫秒结束，并且rangelider-end-event中没有新事件出现.

To determine the end of the rangeslider event you could use a timer. If new events come in in an timerange of 800ms its not the end and the timer restarts. If the 800ms are over and no new event comed in its the rangeslider-end-event.

当然，这不是完整的解决方案，因为用户可以等待800毫秒而无需释放滑块.因此，您还必须使用一些鼠标事件来构建真正正确的Rangeslider-end-event.希望能引导您走向正确的方向.我认为有很多解决方法.

Of course this is not the full solution, cause a user can wait 800ms without release the slider. So you must use some mouse events too to build a really right rangeslider-end-event. Hope that leads you in a right direction. I think there are many ways to solve it.

在jsfiddle中，这是一个完整的示例，它是基于rangeliders的可口网站示例，并向控制台触发了rangelider-end-event: https://jsfiddle.net/7d03n2k1/

Here is a full example in jsfiddle to that based on the plotly website example of rangesliders and fires a rangeslider-end-event to the console: https://jsfiddle.net/7d03n2k1/

我更新了我的代码: https://jsfiddle.net/7d03n2k1/1/ 原因window.setTimout(...)返回一个ID，并且没有对象是错误的代码.

I updadet my code: https://jsfiddle.net/7d03n2k1/1/ Cause window.setTimout(...) returns an Id and no object the code was wrong.

这篇关于密谋rangelider如何确定是否选择了范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！