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()},...];

これで、タイムラインは、ユーザーが範囲を変更したときに現在の日付に自動的にフォーカスするようにしたいと思います。

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

が、期待通りに発生しません注力：私はrangechangeイベントを使用しようとしました。

何が起こっているのか、この機能を実装する方法を理解してもらえますか？

Answer 1

rangechangeは、タイムラインを変更するたびに複数回発射するので、タイムラインがアニメーション化された場合でも、それはrangechangeイベントを発射し続ける特定のイベントに注力しようとしています。 問題にはいくつか解決策があります。

1. は、あなたの周りの不規則ジャンプからそれを防ぐために、プロパティのbyUserプロパティオブジェクトをチェックし、それが（ズームやタイムラインのスクロールユーザー）が真である場合にのみフォーカスを引き起こす可能性があります。単に単にのみ、各タイムラインの変更のため、一度解雇ますイベントを、rangechanged使用

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

2. を使用して、現在のイベントリスナーを交換してください。あなたがユーザー駆動型ではない範囲の変更を予定している場合、これは使用すべきイベントです。ここでも、変更は簡単で、あなただけの

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

にイベントリスナーを変更する必要があります