javascript - 从 sigma.js 中删除所有实例

Question

我正在尝试从我的 div 中删除(或清理 Canvas )，但事件 kill 仅删除元素的属性而不是图像。我可以做什么？这是我的代码:

var s = new sigma('container');
    s.graph
    .addNode({
      id: 'n0',
      label: 'Start',
      x: 0,
      y: 0.5,
      size: 1,
      color: '#f00'
    })
    .addNode({
      id: 'n1',
      label: 'End',
      x: 1,
      y: 0.5,
      size: 1,
      color: '#00f'
    })
    .addEdge({
      id: 'e0',
      source: 'n0',
      target: 'n1'
    });

    s.settings({
      edgeColor: 'default',
      defaultEdgeColor: 'grey'
    });

    s.refresh();


    $(function(){
      $("#shape").click(function(){

        //s.kill();
        //s = new sigma('container');
        s.graph
        .addNode({
          id: 'n3',
          label: 'Start',
          x: 0,
          y: 0,
          size: 1,
          color: '#f00'
        })
        .addNode({
          id: 'n4',
          label: 'End',
          x: 1,
          y: 1,
          size: 1,
          color: '#00f'
        })
        .addEdge({
          id: 'e1',
          source: 'n3',
          target: 'n4'
        });

        s.settings({
          edgeColor: 'default',
          defaultEdgeColor: 'grey'
        });



        s.refresh();
        console.log("added!");
      });
    });

Answer 1

肯定有更好的方法来做到这一点，但我遇到了同样的问题。我通过完全删除包含图形的 DOM 元素然后重新创建它来解决它:

HTML:

<div id="graph-container">
    <div id="graph"></div>
</div>

JavaScript:

var sigma_graph = null; 

function create_graph() {
    sigma_graph = new sigma({ ... });
    ... populate graph ... 
}

function refresh_graph() {
    // to delete & refresh the graph
    var g = document.querySelector('#graph');
    var p = g.parentNode;
    p.removeChild(g);
    var c = document.createElement('div');
    c.setAttribute('id', 'graph');
    p.appendChild(c);

    create_graph(); 
}

请注意，我没有使用 jQuery，否则它会是这样的:

$('#graph').remove(); 
$('#graph-container').html('<div id="graph"></div>'); 

虽然这个方法似乎可行，但我不能说它是不是一个好主意。 (如果重要的话，我正在使用 Canvas 渲染器。)