Question

我尝试从我的div中删除（或清理画布），但事件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>');

虽然这种方法似乎有效，但我不能说这是不是一个好主意。（我使用画布渲染器，如果重要的话。）

Answer 2

您可以重复使用sigma实例，而不需要完全杀死该实例。我有同样的问题，这就是我解决它的方式。只需要一个sigma实例，并在需要新图形时清除它。

s = new sigma({...});

//do stuff with the graph.

function clear_graph() {
    //this gets rid of all the ndoes and edges
    s.graph.clear();
    //this gets rid of any methods you've attached to s.
    s.graph.kill();
};

Answer 3

清除图形调用刷新后：

s.graph.clear();
s.refresh();

Answer 4

我正在使用jquery

$("#graph").empty();

从sigma.js中删除所有实例

4 个答案: