Question

我已经使用vis.js库创建了一个时间轴（包含项目）。除了id之外，每个项目还有其他属性，例如content和className。我要做的是单击一个项目并自动突出显示所有其他具有相同className的项目，并单击该项目。

到目前为止，我只设法收到所点击项目的ID，但没有收到其他信息，例如className。是否可以接收className属性？有没有办法可以通过vis.js完成？提前谢谢

Answer 1

我会尽力的。但是，我对vis.js时间轴还是有点陌生。

基本上，我只是过滤并返回时间线中第一个选定项目的项目，并获得它的className。然后，我再次查询时间轴，要求它向我返回所有具有该className的项。

最后，我将setSelection方法与我的ID篮结合使用，以选择并突出显示时间轴中的项目。

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中选择时间轴上的多个项目

1 个答案: