0

我正在开发一个具有多个选项卡的应用程序（使用 jQuery UI）。这些可以由用户打开和关闭。每个选项卡中都有一个来自 JavaScript InfoVis Toolkit ( http://philogb.github.io/jit/static/v20/Jit/Examples/RGraph/example1.html ) 的 rGraph 可视化。（选项卡和可视化的代码与各自网站上的示例非常相似）

每当我创建一个新选项卡时，都会正确生成 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
4

0 回答 0