Несколько экземпляров 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

0 ответов

Другие вопросы по тегам