Sigma Graph不显示

Question

我正在从位于文件夹中的csv文件获取节点列表和边列表。当我运行代码时，会显示图形，但是当我在f12模式下以调试模式运行代码时，则会显示图形。我从控制台检查的节点和边缘没有问题。

我的节点之一-> id：“ 100034290492972”，标签：“ 100034290492972”，x：0.21541406281878073，y：0.2506041526349967，大小：10，颜色：“＃666”

我的优势之一-> id：“ e0”，来源：“ 100022117542324”，目标：“ 100034290492972”，大小：5，颜色：“＃ccc”，类型：“曲线”

有我的代码：

var i,
    s,
    N = 30,
    E = 30,
    g = {
      nodes: [],
      edges: []
    };



 d3.csv("csv/nodes.csv", function(data) {
    var list = arrayToCSV(data);
    <!-- alert(list.split('"')); -->
    var splitted = list.split('"');
    var node_values = []
    for (i= 3; i <= splitted.length; i+=2){
        node_values.push(splitted[i]);
    }

    <!-- alert(node_values); -->

    for (i=0;i<node_values.length;i++){

        if(node_values[i] != undefined){
            var node_splitted = node_values[i].split(";");
            g.nodes.push({
                id: node_splitted[0].toString(),
                label: node_splitted[1].toString(),
                x:Math.random(),
                y:Math.random(),
                size:10,
                color:'#666'
            })
        }

    }

});


d3.csv("csv/edges.csv",function(data){
    var list = arrayToCSV(data);
    var splitted = list.split('"');
    var edge_values = []
    for (i= 3; i <= splitted.length; i+=2){
        edge_values.push(splitted[i]);
    }

    for (i=0;i<=edge_values.length;i++){

        if(edge_values[i] != undefined){
            var edge_splitted = edge_values[i].split(";");
            g.edges.push({
                id: edge_splitted[0],
                source: edge_splitted[1].toString(),
                target: edge_splitted[2].toString(),
                size: 5,
                color: '#ccc',
                type:'curve'
        })  
        }

    }

}
);


function arrayToCSV(objArray) {
     const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
     let str = `${Object.keys(array[0]).map(value => `"${value}"`).join(",")}` + '\r\n';

     return array.reduce((str, next) => {
         str += `${Object.values(next).map(value => `"${value}"`).join(",")}` + '\r\n';
         return str;
        }, str);

 } 

s = new sigma({
  graph: g,
  settings: {
    enableHovering: false
  }
});

s.addRenderer({
  id: 'main',
  type: 'svg',
  container: document.getElementById('graph-container'),
  freeStyle: true
});

s.refresh();

// Binding silly interactions
function mute(node) {
  if (!~node.getAttribute('class').search(/muted/))
    node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted');
}

function unmute(node) {
  node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2'));
}

$('.sigma-node').click(function() {

  // Muting
  $('.sigma-node, .sigma-edge').each(function() {
    mute(this);
  });

  // Unmuting neighbors
  var neighbors = s.graph.neighborhood($(this).attr('data-node-id'));
  neighbors.nodes.forEach(function(node) {
    unmute($('[data-node-id="' + node.id + '"]')[0]);
  });

  neighbors.edges.forEach(function(edge) {
    unmute($('[data-edge-id="' + edge.id + '"]')[0]);
  });
});

s.bind('clickStage', function() {
  $('.sigma-node, .sigma-edge').each(function() {
    unmute(this);
  });
});