Javascript InfoVis RGraph可视化的多个实例

我正在开发一个具有多个选项卡的应用程序（使用jqueryui）。这些可以由用户打开和关闭。每个选项卡中都有一个来自JavaScript InfoVis工具包（）的rGraph可视化。（选项卡和可视化的代码与各自网站上的示例非常相似）

无论何时创建新选项卡，都会正确生成rGraph。这似乎可以很好地扩展，我可以在多个选项卡之间来回单击，没有任何问题。但是，如果我以任何方式与rGraph交互（例如，通过单击节点将其移动），则其他选项卡中的现有rGraph将停止工作。当我单击任何现有的RGraph时，它会产生错误：

TypeError:node未定义

。换句话说，新实例工作正常，但单击最新实例会破坏以前的实例

对此有什么办法吗

注意：文档中似乎允许多个实例-您可以使用不同的变量名创建每个实例，例如

var-graph1=new…

var-graph2=new…

等。这确实可行，但由于选项卡（以及因此产生的图形）是动态生成的，我不能像这样指定特定的变量名。我试着做了以下几点：

var graphs = {};
graphs[unique_id_i_pass_in] = new Graph();

……但这似乎没有什么区别

编辑：以下是我用来调用rGraphs的代码（document\u id是我为每个图形传递的唯一变量）：

---

对于单独的选项卡，是否有单独的RGraph类实例？如果没有，那可能就是问题所在。对于每个图形，拥有自己的RGraph实例是干净的。只是给你一个想法，不确定这是否是问题所在。是的，每个选项卡都有一个单独的rGraph实例。但是，由于某些原因，没有检测到唯一的变量名或每个实例。还有什么建议吗？您能给我们看一些更多的代码吗？如何创建rGraph的实例？如何在其中加载数据？添加到原始问题。见上文。

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