访问Vis.js中的节点标签参数值

时间:2017-11-08 14:42:49

标签: javascript vis.js vis.js-network

我正在尝试访问vis.js数据集中的节点标签参数值。我知道我可以从nodeId

获取var nodeId = params.nodes[0];

如何访问Node id = 2的Label参数值?

// create an array with nodes
var nodes = [
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
];

// create an array with edges
var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};


network.on("click", function (params) {

    if (params.nodes.length > 0) {

        var nodeId = params.nodes[0];

1 个答案:

答案 0 :(得分:3)

如果你真的可以保证你按照惯例遵循节点id整数的顺序,从1开始,然后,为了回答这个问题,你可以访问标签,如下面的点击回调:

network.on("click", function(params) { // NOT RECOMMENDED 
    if (params.nodes.length > 0) {  
        var nodeId = params.nodes[0];
        console.log("Clicked on a NODE with id = " + nodeId + ", label = " + 
           nodes[nodeId - 1].label);        
    }
});

(减去1是必要的,因为数组从0开始索引,但是ID从1开始)

然而,这不是一个好的编码实践,因为它过于依赖总是正确的约定。如果您开始删除节点,使用字符串作为ID等操作,那么该惯例可能会崩溃。

另一种方法是在网络对象中使用内部结构。问题是用户文档没有提到这一点,所以它有些冒险 - 它可能会在未来的版本中发生变化。在内部结构中,我发现你可以使用以下内容:

console.log("..Or, using undocumented internal structure, node label = " + 
    this.body.nodes[nodeId].options.label);

据我所知,对于vis.js的用户,没有记录从网络对象获取节点和边缘信息。对于使用图算法,节点和边是感兴趣的关键对象,但那些是未记录的隐藏内部对象。因此,我们采取一些可能被视为不良编码实践的风险。

vis.js的推荐做法是使节点成为vis.DataSet。你已经把边缘变成了vis.DataSet - 为什么节点也不行?

然后,节点的规范看起来像

var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
]);

和显示标签的点击回调看起来像

network.on("click", function(params) {
    if (params.nodes.length > 0) {
        var nodeId = params.nodes[0];
        console.log("Clicked on a NODE with id = " + nodeId + ", label = " + 
            nodes.get(nodeId).label);           
    }
});

您还可以访问其他DataSet方法,例如add()和update(),例如,

nodes.add({id: 6, label: 'Node 6'});
nodes.update({id: 6, label: "Modified node 6", newVar: "A new property"}); 

使用DataSet和这些方法允许您以任何顺序输入任何id的节点和边,包括整数和字符串。这应该都是有效的:在内部,看起来对节点和边的键访问是通过引用对象属性而不是数组索引,因此访问应该很快。 API会为了方便用户而生成数组,但它会生成它们,而不仅仅是复制它们。

从用户的角度来看,必须与网络对象分开维护一些节点信息似乎有点尴尬,特别是如果有多个网络对象。但至少这种方法只使用已发布的API。