如何在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 属性，并仅在焦点为真时触发焦点（用户在时间轴中缩放或滚动），防止它不规律地跳来跳去。只需用

   替换当前的事件监听器

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

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

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