Несколько экземпляров InfoVis RGraph визуализаций
Я разрабатываю приложение, которое имеет несколько вкладок (используя пользовательский интерфейс jQuery). Они могут быть открыты и закрыты пользователем. Внутри каждой вкладки находится визуализация rGraph из JavaScript InfoVis Toolkit ( http://philogb.github.io/jit/static/v20/Jit/Examples/RGraph/example1.html). (Код для вкладок и визуализаций очень похож на примеры на соответствующих веб-сайтах)
Всякий раз, когда я создаю новую вкладку, rGraph генерируется правильно. Кажется, это очень хорошо масштабируется, и я могу без проблем переходить по нескольким вкладкам. Однако, если я каким-либо образом взаимодействую с rGraph (например, нажимая на узел, чтобы переместить его), существующие rGraph на других вкладках перестают работать. Когда я нажимаю на любой из существующих rGraphs, он выдает ошибку: TypeError: node is undefined
, Другими словами, новые экземпляры работают нормально, но нажатие на самый новый нарушает предыдущие.
Есть ли что-нибудь, что можно с этим сделать?
Примечание. Кажется, что в документах есть некоторые допуски для нескольких экземпляров - вы можете создать каждый экземпляр с другим именем переменной, например: var graph1 = new ...
var graph2 = new ...
и т.д. Это действительно работает, но так как вкладки (и, следовательно, графики) генерируются динамически, я не могу назначить конкретные имена переменных, как это. Я пытался сделать следующее:
var graphs = {};
graphs[unique_id_i_pass_in] = new Graph();
... но это, казалось, не имело никакого значения.
РЕДАКТИРОВАТЬ: Вот код, который я использую для вызова rGraphs (document_id - уникальная переменная, которую я передаю для каждого графика):
var doc_rgraph = {};
//init RGraph
doc_rgraph[document_id] = new $jit.RGraph({
//Where to append the visualization
injectInto: 'document_vis_'+document_id,
//Optional: create a background canvas that plots
//concentric circles.
background: {
CanvasStyles: {
//Colour of the background circles
strokeStyle: '#C5BE94'
}
},
//Add navigation capabilities:
//zooming by scrolling and panning.
Navigation: {
enable: true,
panning: true,
zooming: 10
},
//Set Node and Edge styles.
Node: {
//Colour of the actual nodes
color: '#660000'
},
Edge: {
//Color of lines between nodes
color: '#660000',
lineWidth:1.5
},
onBeforeCompute: function(node){
Log.write("Centering " + node.name + "...");
},
//Add the name of the node in the correponding label
//and a click handler to move the graph.
//This method is called once, on label creation.
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
domElement.onclick = function(){
doc_rgraph[document_id].onClick(node.id, {
onComplete: function() {
Log.write("Done");
}
});
};
},
//Change some label dom properties.
//This method is called each time a label is plotted.
onPlaceLabel: function(domElement, node){
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
if (node._depth == 0) {
style.fontSize = "0.8em";
//Text colour of ring 1 nodes
style.color = "#000000";
style.backgroundColor = "#F05322";
style.padding = "1px 3px";
} else if (node._depth == 1) {
style.fontSize = "0.8em";
//Text colour of ring 1 nodes
style.color = "#FFFFFF";
style.backgroundColor = "#164557";
style.padding = "1px 3px";
} else if(node._depth == 2){
style.fontSize = "0.7em";
//Text colour of ring 2 nodes
style.color = "#333333";
style.backgroundColor = "#CAC399";
} else {
style.display = 'none';
}
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
},
onComplete: function(){
Log.write("Done");
}
});
//load JSON data
doc_rgraph[document_id].loadJSON(document_data[document_id]);
//trigger small animation
doc_rgraph[document_id].graph.eachNode(function(n) {
var pos = n.getPos();
pos.setc(-200, -200);
});
doc_rgraph[document_id].compute('end');
doc_rgraph[document_id].fx.animate({
modes:['polar'],
duration: 1000
});
//end