Vis.js：如何形成一个集群并扩展每个集群，然后单击每个节点就动态地形成另一个集群？

Question

我正在使用Vis js形成网络拓扑。我需要的输出与下图完全相同：

我能够实现前两个步骤。现在单击每个节点，我想知道节点值，即该节点中的CMTS值，并对该特定节点形成另一个集群。

这是我尝试过的代码：

var color_code = "#2CC2E3";
var DIR = 'assets/images/';
var nodes = [{
        id: 1,
        size: 40,
        label: "PE",
        font: {
            align: 'left'
        },
        shape: 'image',
        image: DIR + 'PE.png',
        title: "PE",
        x: 0,
        y: 0
    },
    {
        id: 2,
        label: 'CMTS1',
        cid: 1,
        color: color_code,
        font: {
            color: 'white'
        },
        x: 200,
        y: -200
    },
    {
        id: 3,
        label: 'CMTS2',
        cid: 1,
        color: color_code,
        font: {
            color: 'white'
        },
        x: 200,
        y: -100
    },
    {
        id: 4,
        label: 'CMTS3',
        cid: 1,
        color: color_code,
        font: {
            color: 'white'
        },
        x: 200,
        y: 0
    },
    {
        id: 5,
        label: 'CMTS4',
        cid: 1,
        color: color_code,
        font: {
            color: 'white'
        },
        x: 200,
        y: 100
    },
    {
        id: 6,
        label: 'CMTS5',
        cid: 1,
        color: color_code,
        font: {
            color: 'white'
        },
        x: 200,
        y: 200
    },

    {
        id: 7,
        label: 'FN1',
        cid: 2,
        shape: 'box',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 400,
        y: -200
    },
    {
        id: 8,
        label: 'FN2',
        cid: 2,
        shape: 'box',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 400,
        y: -100
    },
    {
        id: 9,
        label: 'FN3',
        cid: 2,
        shape: 'box',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 400,
        y: 0
    },
    {
        id: 10,
        label: 'FN4',
        cid: 2,
        shape: 'box',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 400,
        y: 100
    },
    {
        id: 11,
        label: 'FN5',
        cid: 2,
        shape: 'box',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 400,
        y: 200
    },
    {
        id: 12,
        label: 'GA1',
        cid: 3,
        shape: 'triangle',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 600,
        y: -200
    },
    {
        id: 13,
        label: 'GA2',
        cid: 3,
        shape: 'triangle',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 600,
        y: -100
    },
    {
        id: 14,
        label: 'GA3',
        cid: 3,
        shape: 'triangle',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 600,
        y: 0
    },
    {
        id: 15,
        label: 'GA4',
        cid: 3,
        shape: 'triangle',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 600,
        y: 100
    },
    {
        id: 16,
        label: 'GA5',
        cid: 3,
        shape: 'triangle',
        color: color_code,
        font: {
            color: 'white'
        },
        x: 600,
        y: 200
    }
];

// create an array with edges
var edges = [{
        from: 1,
        to: 2
    },
    {
        from: 1,
        to: 3
    },
    {
        from: 1,
        to: 4
    },
    {
        from: 1,
        to: 5
    },
    {
        from: 1,
        to: 6
    },

    {
        from: 2,
        to: 7
    },
    {
        from: 3,
        to: 8
    },
    {
        from: 4,
        to: 9
    },
    {
        from: 5,
        to: 10
    },
    {
        from: 6,
        to: 11
    },

    {
        from: 7,
        to: 12
    },
    {
        from: 8,
        to: 13
    },
    {
        from: 9,
        to: 14
    },
    {
        from: 10,
        to: 15
    },
    {
        from: 11,
        to: 16
    }

];

// create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {
    layout: {
        randomSeed: 8
    },
    nodes: {
        fixed: {
            y: true,
            x: true
        }
    },
};
var network = new vis.Network(container, data, options);

//building clustering

network.on('click', function(properties) {

    console.log(properties);
    var clusterOptionsByData = {
        joinCondition: function(childOptions) {

            return childOptions.cid == 3;
        },

        clusterNodeProperties: {
            id: 'cidCluster',
            borderWidth: 3,
            shape: 'database'
        }
    };
    console.log("var", clusterOptionsByData);
    // network.cluster(clusterOptionsByData);
});



network.setData(data);
var cid = '';
var clusterOptionsByData = {

    joinCondition: function(childOptions) {
        cid = childOptions.cid;
        return childOptions.cid == 1;
    },

    clusterNodeProperties: {
        id: cid,
        borderWidth: 3,
        shape: 'database'
    }
};
network.cluster(clusterOptionsByData);

var clusterOptionsByData1 = {
    joinCondition: function(childOptions) {

        return childOptions.cid == 2;
    },

    clusterNodeProperties: {
        id: 'cidCluster1',
        borderWidth: 3,
        shape: 'database'
    }
};
network.cluster(clusterOptionsByData1);

var clusterOptionsByData2 = {
    joinCondition: function(childOptions) {

        return childOptions.cid == 3;
    },

    clusterNodeProperties: {
        id: 'cidCluster2',
        borderWidth: 3,
        shape: 'database'
    }
};
network.cluster(clusterOptionsByData2);

});

我面临的问题是，单击时无法获取节点值。而且我想知道如何动态给边缘链接。

请帮助我找出解决方案。

先谢谢了。