如何动态计算 vis.js 的节点和边
How to dynamically calculate nodes and edges for vis.js
我正在使用正确的方法从查询结果中为图表正确定义数据。
不幸的是,结果中我仍然只得到一个空圆圈。
obj = JSON.parse(response);
$.each(obj.aggregations.system.buckets, function(s, system) {
if (system.doc_count != 0) {
var nodes_tmp = [],
edges_tmp = [],
firs_id = '',
prev_id = '',
last_id = '';
$.each(system.platformSteps.buckets, function(st, step) {
id = st+1;
nodes_tmp.push("{id: " + id + ", label: '" + step.key +"'}");
if (st != 0) {
edges_tmp.push("{from: " + prev_id + ", to: " + id +"}");
} else {
edges_tmp.push("{from: " + id + ", to: '" + id +"'}");
}
prev_id = id;
}); // Loop platform steps
nodes = new vis.DataSet([nodes_tmp]);
edges = new vis.DataSet([edges_tmp]),
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
}; // If system.doc_count != 0
}); // Loop systems
当我调试生成的对象时,我得到了不同的节点数据结构:
- nodes
- _data
- 3925b97c-cc43-45f4-8b2c-99773a0960e6
- 0: "{id: 1, label: 'AIBFULLTRACE'}"
- 1: "{id: 2, label: 'euCyclone'}"
- id: "3925b97c-cc43-45f4-8b2c-99773a0960e6"
但在演示中架构是:
- nodes
- _data
- 1: Object
- id:1
- label:"Node 1"
- 2: Object
- id:2
- label:"Node 2"
我那里的作业哪里做错了?
谢谢,雷迪
已通过使用 eval() 和 .add() 方法修复:
var node_tmp = {},
edge_tmp = {},
node_txt = '',
edge_txt = '',
firs_id = '',
prev_id = '',
last_id = '';
var nodes = new vis.DataSet(node_tmp);
var edges = new vis.DataSet(edge_tmp);
$.each(system.platformSteps.buckets, function(st, step) {
id = st+1;
if (st == 0) {
node_txt = '({id: ' + id + ', label: \'' + step.key +'\',shape: \'box\', first: true})';
} else {
node_txt = '({id: ' + id + ', label: \'' + step.key +'\',shape: \'box\'})';
}
node_tmp = eval(node_txt);
nodes.add(node_tmp);
if (st != 0) {
edge_txt = '({from: ' + prev_id + ', to: ' + id +',arrows:\'to\', label:\'to\'})';
edge_tmp = eval(edge_txt);
edges.add(edge_tmp);
} else {
//edges_tmp.push("{from: " + id + ", to: '" + id +"'}");
}
//console.log(edges_tmp.toString());
prev_id = id;
}); // Loop platform steps
已通过使用 eval() 和 .add() 方法修复:
var node_tmp = {},
edge_tmp = {},
node_txt = '',
edge_txt = '',
firs_id = '',
prev_id = '',
last_id = '';
var nodes = new vis.DataSet(node_tmp);
var edges = new vis.DataSet(edge_tmp);
$.each(system.platformSteps.buckets, function(st, step) {
id = st+1;
if (st == 0) {
node_txt = '({id: ' + id + ', label: \'' + step.key +'\',shape: \'box\', first: true})';
} else {
node_txt = '({id: ' + id + ', label: \'' + step.key +'\',shape: \'box\'})';
}
node_tmp = eval(node_txt);
nodes.add(node_tmp);
if (st != 0) {
edge_txt = '({from: ' + prev_id + ', to: ' + id +',arrows:\'to\', label:\'to\'})';
edge_tmp = eval(edge_txt);
edges.add(edge_tmp);
} else {
//edges_tmp.push("{from: " + id + ", to: '" + id +"'}");
}
//console.log(edges_tmp.toString());
prev_id = id;
}); // Loop platform steps
我正在使用正确的方法从查询结果中为图表正确定义数据。
不幸的是,结果中我仍然只得到一个空圆圈。
obj = JSON.parse(response);
$.each(obj.aggregations.system.buckets, function(s, system) {
if (system.doc_count != 0) {
var nodes_tmp = [],
edges_tmp = [],
firs_id = '',
prev_id = '',
last_id = '';
$.each(system.platformSteps.buckets, function(st, step) {
id = st+1;
nodes_tmp.push("{id: " + id + ", label: '" + step.key +"'}");
if (st != 0) {
edges_tmp.push("{from: " + prev_id + ", to: " + id +"}");
} else {
edges_tmp.push("{from: " + id + ", to: '" + id +"'}");
}
prev_id = id;
}); // Loop platform steps
nodes = new vis.DataSet([nodes_tmp]);
edges = new vis.DataSet([edges_tmp]),
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
}; // If system.doc_count != 0
}); // Loop systems
当我调试生成的对象时,我得到了不同的节点数据结构:
- nodes
- _data
- 3925b97c-cc43-45f4-8b2c-99773a0960e6
- 0: "{id: 1, label: 'AIBFULLTRACE'}"
- 1: "{id: 2, label: 'euCyclone'}"
- id: "3925b97c-cc43-45f4-8b2c-99773a0960e6"
但在演示中架构是:
- nodes
- _data
- 1: Object
- id:1
- label:"Node 1"
- 2: Object
- id:2
- label:"Node 2"
我那里的作业哪里做错了?
谢谢,雷迪
已通过使用 eval() 和 .add() 方法修复:
var node_tmp = {},
edge_tmp = {},
node_txt = '',
edge_txt = '',
firs_id = '',
prev_id = '',
last_id = '';
var nodes = new vis.DataSet(node_tmp);
var edges = new vis.DataSet(edge_tmp);
$.each(system.platformSteps.buckets, function(st, step) {
id = st+1;
if (st == 0) {
node_txt = '({id: ' + id + ', label: \'' + step.key +'\',shape: \'box\', first: true})';
} else {
node_txt = '({id: ' + id + ', label: \'' + step.key +'\',shape: \'box\'})';
}
node_tmp = eval(node_txt);
nodes.add(node_tmp);
if (st != 0) {
edge_txt = '({from: ' + prev_id + ', to: ' + id +',arrows:\'to\', label:\'to\'})';
edge_tmp = eval(edge_txt);
edges.add(edge_tmp);
} else {
//edges_tmp.push("{from: " + id + ", to: '" + id +"'}");
}
//console.log(edges_tmp.toString());
prev_id = id;
}); // Loop platform steps
已通过使用 eval() 和 .add() 方法修复:
var node_tmp = {},
edge_tmp = {},
node_txt = '',
edge_txt = '',
firs_id = '',
prev_id = '',
last_id = '';
var nodes = new vis.DataSet(node_tmp);
var edges = new vis.DataSet(edge_tmp);
$.each(system.platformSteps.buckets, function(st, step) {
id = st+1;
if (st == 0) {
node_txt = '({id: ' + id + ', label: \'' + step.key +'\',shape: \'box\', first: true})';
} else {
node_txt = '({id: ' + id + ', label: \'' + step.key +'\',shape: \'box\'})';
}
node_tmp = eval(node_txt);
nodes.add(node_tmp);
if (st != 0) {
edge_txt = '({from: ' + prev_id + ', to: ' + id +',arrows:\'to\', label:\'to\'})';
edge_tmp = eval(edge_txt);
edges.add(edge_tmp);
} else {
//edges_tmp.push("{from: " + id + ", to: '" + id +"'}");
}
//console.log(edges_tmp.toString());
prev_id = id;
}); // Loop platform steps