如何自动关注 vis.js 时间轴中的当前日期

Question

我编写了一个程序，它使用 vis.js 时间轴并通过单击按钮关注当前日期：

<button type="button" class="btn btn-info" onclick="timeline.focus(0)">Focus on current date</button>

哪里

var timeline = new vis.Timeline(container, data, options);

和

var data = [ //create an item in the dataset corresponding to the current date {id: 0, content: 'today', start: Date()},...];

现在我希望时间轴在用户更改其范围时自动聚焦于当前日期。我尝试使用 rangechange 事件：

timeline.on('rangechange', function (properties) { timeline.focus(0); });,

但没有按预期进行对焦。

能否请您帮助我了解发生了什么以及如何实现此功能？

Answer 1

rangechange 会多次触发，每次时间线发生变化时，所以即使时间线处于动画状态，试图专注于特定事件它也会继续触发 rangechange 事件。 有几种方法可以解决您的问题。

1. 您可以检查 byUser 属性 对象的 properties 并且仅在以下情况下触发焦点这是真的（用户在时间轴中缩放或滚动），以防止它不规则地跳来跳去。只需将您当前的事件侦听器替换为

   timeline.on('rangechange', function(properties) {
       if (properties.byUser) {
           timeline.focus(0);
       }
   });
   

2. 只需使用 rangechanged 事件，每次时间线更改时只触发一次。如果您计划进行非用户驱动的范围更改，这是您应该使用的事件。同样，更改很简单，您只需要将事件侦听器更改为

   timeline.on('rangechanged', function(properties) {
       timeline.focus(0);
   });