一键选择 vis.js 中时间轴上的多个项目

Question

我用 vis.js library.Except 从 id 创建了一个时间轴（带有项目），每个项目还有其他属性，例如内容和类名。我想做的是单击一个项目并自动突出显示与单击的项目具有相同类名的所有其他项目。

到现在我只收到了点击的item的id，还没有收到className等其他信息。是否可以接收 className 属性？有什么方法可以通过 vis.js 完成吗？提前谢谢你

Answer 1

我会尽力帮忙。但是，我对 vis.js 时间线还是有点陌生。

基本上我只是过滤并 return 时间线的第一个 selected 项目并获取它的类名。然后我再次查询时间线，要求它 return 我所有具有该类名的项目。

最后，我使用 setSelection 方法和我的一篮子 ID select 并突出显示时间轴中的项目。

timeline.on('select', function (props) {

    // create empty array to hold ids of items with the same class name
    var sameClassNameIds = []

    // selected item/s ids given to you as an array on selection
    console.log(props.items)

    // define a variable which get and hold the selected item's object by filtering the timeline
    var selectedItem = items.get({
        filter: function (item) {
            //return id from timeline matching id in props.items
            return props.items.indexOf(item.id) !== -1;
        }
    });

    // here is the selected item's className
    var selectedClassName = selectedItem[0].className

    // retrieve all items with the above className
    var sameClassNameItems = items.get({
        filter: function (item) {
            //return items from timeline matching query
            return item.className === selectedClassName;
        }
    });

    // loop over retrieved array of items pushing each item id into an array
    sameClassNameItems.forEach(function (item) {
        sameClassNameIds.push(item.id)
    })

    // feed the setSelection method the array of ids you'd like it to select and highlight
    timeline.setSelection(sameClassNameIds)

});

一键选择 vis.js 中时间轴上的多个项目

Selecting multiple items on a timeline in vis.js with one click

javascript

arrays

vis.js