Vis.js 时间轴无法切换嵌套组

Question

我不想用一个按钮切换所有组。我只想使用组标题左侧的小三角形按钮一次切换各个组。

目前，我可以点击按钮，三角形旋转90度，但嵌套组仍然可见。

我在 GitHub 上看到了这个问题和类似的问题，但我还没有找到答案。

下面是我配置时间线的方式...

var container = document.getElementById('timelinez');
var items = new vis.DataSet();
var visibleData;

// Configure groups
//var groupLabelHTML = '<p style="margin:0px;padding:0px;">'+name+'<br><a href='+URL+'><img style="height:14px" src='+arrowURL+'></a></p>';
var groups = [
    {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
    {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
    {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
    {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
    {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
    {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
    {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
    {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

    {id: 'x1_APs',content: 'APs'},
    {id: 'x2_APs',content: 'APs'},
    {id: 'x3_APs',content: 'APs'},
    {id: 'x4_APs',content: 'APs'},
    {id: 'x5_APs',content: 'APs'},
    {id: 'x6_APs',content: 'APs'},
    {id: 'x7_APs',content: 'APs'},
    {id: 'x8_APs',content: 'APs'}
];

// Configuration for the Timeline
var options = {
    width: '100%',
    type:'range',
    groupOrder: 'content',
    editable: true,
    groupEditable: true,
    orientation: 'top',
    tooltip:{followMouse:true},
    start: new Date(Date.now()),
    end: new Date(sixWeek), 
    groupTemplate: function (group) {
        var container = document.createElement('div');
        var label = document.createElement('span');
        var hide = document.createElement('img');
        label.innerHTML = group.content + ' ';
        label.style = "font-size:15px";
        container.insertAdjacentElement('afterBegin',label);
        hide.src = "cant show this";
        hide.className = "hide-btn";

        if (!(group.id.indexOf("_APs") >= 0)) {
            container.insertAdjacentElement('beforeEnd',hide);  
        }   

        return container;
    }
};

我无法显示更多代码，因为剥离专有内容非常乏味。这是我创建项目的方式...

items.add({group:sys,content:name,title:toolTip,start:start,end:end,className:color,variety:type,subgroup:subgroup,system:sys,linkHTML:linkHTML});

如何切换这些嵌套组的可见性？

Answer 1

解决方案是将组创建为数据集而不是数组。

也就是说。这...

var groups = [
   {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
   {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
   {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
   {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
   {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
   {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
   {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
   {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

   {id: 'x1_APs',content: 'APs'},
   {id: 'x2_APs',content: 'APs'},
   {id: 'x3_APs',content: 'APs'},
   {id: 'x4_APs',content: 'APs'},
   {id: 'x5_APs',content: 'APs'},
   {id: 'x6_APs',content: 'APs'},
   {id: 'x7_APs',content: 'APs'},
   {id: 'x8_APs',content: 'APs'}
];

改成了这个...

var groups = new vis.DataSet();
groups.add([
   {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
   {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
   {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
   {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
   {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
   {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
   {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
   {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

   {id: 'x1_APs',content: 'APs'},
   {id: 'x2_APs',content: 'APs'},
   {id: 'x3_APs',content: 'APs'},
   {id: 'x4_APs',content: 'APs'},
   {id: 'x5_APs',content: 'APs'},
   {id: 'x6_APs',content: 'APs'},
   {id: 'x7_APs',content: 'APs'},
   {id: 'x8_APs',content: 'APs'}
]);

现在嵌套组可见性通过组名旁边的箭头按预期切换。

Vis.js 时间轴无法切换嵌套组

Vis.js Timeline cannot toggle nested groups

javascript

visualization

vis.js

vis.js-timeline