javascript - Visjs 动态更新时间线项目

Question

我正在使用 visjs Timeline ，并且我正在尝试让一个项目从当前时间开始扩展 2 天。

var items = new vis.DataSet([{
  id = 0,
  start = moment(new Date()),
  end = moment(new Date()).add(2, 'days')
}, /* And maybe more items */]);

创建新时间线时:

var container = document.getElementById('container');
var timeline = new vis.Timeline(container, items, null);

现在我想更新我的一个项目(比如第一个)，以便它始终从当前时间开始。我认为 currentTimeTick 是更新的好地方:

timeline.on('currentTimeTick', function() {
  var itemData = timeline.itemSet.items[0].data;
  itemData.start = moment();   // Set the start to current time
  timeline.itemSet.items[0].setData(itemData);
}

当我在 Chrome 中调试时，我看到项目集中的开始时间发生了变化，但我不确定为什么 UI 没有更新以反射(reflect)该变化(我希望项目的开始时间与我的匹配当前时间)。

我查看了源代码，在我看来 setData 应该会导致时间轴上的 redraw，但我认为它不会发生。当我拖动时间线时，它会导致重绘并且相应地调整项目的大小。我是否需要在此处强制执行重绘？

Answer 1

虽然调用 timeline.redraw() 是一个选项，但它会导致重绘整个时间线，这是昂贵的。

RangeItem有方法 repositionX在它的 prototype 中，它显然调整了单个项目的水平位置，所以我所做的是在设置数据后调用这个位置:

timeline.itemSet.items[0].setData(itemData);
timeline.itemSet.items[0].repositionX();

编辑:正如@madebydavid 所建议的，我们可以用这一行替换上面的两行，而不是直接调用 repositionX 和 setData:

timeline.itemsData.update(itemData);

感谢@madebydavid