4

我正在尝试访问 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];
4

1 回答 1

7

如果你真的可以保证你会遵循一个约定，即节点 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。

于 2017-11-19T05:24:42.523 回答