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未更新以反映该更改（我希望项目的开头与我的匹配）当前时间）。

我浏览了源代码，在我看来setData应该在时间轴上产生redraw，但我认为它不会发生。当我拖动时间轴时，它会导致重绘并且项目的大小相应。我需要做些什么来强制redraw吗？

Answer 1

尽管调用timeline.redraw()是一个选项，但它会导致重绘整个时间轴，这很昂贵。

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

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

修改：正如@madebydavid建议的那样，我们不是直接调用repositionX和setData，而是用这一行替换上面的两行：

timeline.itemsData.update(itemData);

谢谢@madebydavid

Answer 2

您是否尝试重新绘制时间轴？

timeline.redraw();

Answer 3

基于版本7.4.2 ，项目index i.e [0]...可以代替id起作用：

// Get element from event
let element = e.target;

// Get item data
let itemData = prevTimeline.itemSet.items[element.id].data;

// Set end time based on the start time and duration
itemData.end = moment(itemData.start).add(moment(itemData.duration, 'HH:mm:ss').seconds(), 's');

// Update timeline data (auto refreshes)
prevTimeline.itemsData.update(itemData);

Visjs动态更新时间轴项

3 个答案: