Visjs 动态更新时间线项目答案

【问题标题】：Visjs Dynamically Update a Timeline ItemVisjs 动态更新时间线项目
【发布时间】：2017-06-06 02:14:32
【问题描述】：

我正在使用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在这里吗？

【问题讨论】：

标签： javascript vis.js vis.js-timeline

【解决方案1】：

虽然调用timeline.redraw()是一种选择，但它会导致整个时间线被重绘，代价高昂。

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

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

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

timeline.itemsData.update(itemData);

感谢@madebydavid

【讨论】：

我想如果你在vis.DataSet 上调用update 方法，它会自动触发重绘。 timeline.itemSet.update(itemData);。你不需要那样打电话给setData 或repositionX。
感谢您提供的信息。我会试试看它是否有相同的行为
我试过了，但是报错：timeline.itemSet.update is not a function
啊，是的，抱歉——我通常直接操作数据集，而不是通过时间线。我认为要调用的正确函数是timeline.itemsData.update()
抱歉回复晚了，但我认为这里的update 函数需要一些参数。我不确定我需要传递给它什么。

【解决方案2】：

您是否尝试重绘时间线？

timeline.redraw();

【讨论】：

感谢您的回复。实际上，redraw 函数会导致整个时间线被重绘，代价高昂。我最终在项目本身上使用了repositionX

【解决方案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);

【讨论】：