访问 Vis.js 中的节点标签参数值
Accessing a Nodes Label parameter value in Vis.js
我正在尝试访问 vis.js 数据集中的节点标签参数值。我知道我可以从 var nodeId = params.nodes[0];
得到 nodeId
如何访问节点 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];
如果你真的能保证你会遵循一个约定,即节点 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.
我正在尝试访问 vis.js 数据集中的节点标签参数值。我知道我可以从 var nodeId = params.nodes[0];
nodeId
如何访问节点 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];
如果你真的能保证你会遵循一个约定,即节点 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.