vis.js 时间轴 show/hide 项（以及点和线）

Question

我已经通过 classname 为 show/hide 项目编写了一些代码。我通过将 vis-box 的不透明度更改为 0 来实现此目的。但是，当我隐藏 vis-box 时，vis-dot 和从时间轴延伸的垂直线仍然显示。我也想隐藏那些。

Image of hidden boxes with lines showing

到目前为止，我已经能够通过更改 border-color css 属性隐藏整个时间轴的所有线条和点（使用 chrome 检查器）变白。但是我只想隐藏属于特定 class.

项目的点和线

Answer 1

一种解决方案是更改与时间轴一起使用的数据集，根据需要删除和添加项目。

来自文档 (http://visjs.org/docs/data/dataset.html)：

dataset.add(data [, senderId]) - Add one or multiple items to the DataSet. data can be a single item or an array with items. Adding an item will fail when there already is an item with the same id. The function returns an array with the ids of the added items. See section Data Manipulation.

remove(ids [, senderId]) - remove one or multiple items by id or by the items themselves. Returns an array with the ids of the removed items. See section Data Manipulation.

您只需要将项目列表保存到 hide/show 变量中。

Answer 2

在我的例子中，为了隐藏一个项目，我将项目后退一年来隐藏，然后设置原始日期和时间再次显示该项目。

当时间线为可见范围设置了一个最小日期并且不可能超过这个最小值时，这很有用，就像我的情况一样，时间线不能移动到一个月前。

那么代码可能是这样的：

function item_hide(id)
{
    var item;

    item= dataSet_items.get(id);
    if(item === null)
        return;

    item.start= moment(item.start_original).subtract(1, 'y').format("YYYY-MM-DD HH:mm:ss");
    item.end= moment(item.end_original).subtract(1, 'y').format("YYYY-MM-DD HH:mm:ss");
    item.hidden= true;
    dataSet_items.update(item);

    return item;
}


function item_show(id)
{
    var item;

    item= dataSet_items.get(id);
    if(item === null)
        return;

    item.start= item.start_original;
    item.end= item.end_original;
    item.hidden= false;
    dataSet_items.update(item);

    return item;
}

vis.js 时间轴 show/hide 项（以及点和线）

vis.js Timeline show/hide items (and dot and line)

javascript

vis.js