kirtamus kirtamus - 7 months ago 40
Javascript Question

Flickering canvas when loading multiple graphs with springy.js

When rendering a new graph to the canvas with springy.js, on mouseover I am experiencing a flickering between the new graph and the old graph that was previously loaded.

To reproduce run the snippet below and click the change graph button and then mouseover the canvas.



function drawGraph(data) {

var graph = new Springy.Graph();
graph.loadJSON(data);

$('#graph-canvas').springy({
graph: graph
});

}

var graphs = [{
nodes: ['a', 'b', 'c', 'd', 'e'],
edges: [
['a', 'e', {color: '#0000ff'}],
['b', 'd', {color: '#0000ff'}],
['c', 'b', {color: '#0000ff'}],
['d', 'a', {color: '#0000ff'}],
['c', 'a', {color: '#0000ff'}]
]
}, {
nodes: ['a', 'b', 'c', 'd', 'e'],
edges: [
['a', 'e', {color: '#00ff00'}],
['b', 'a', {color: '#00ff00'}],
['c', 'e', {color: '#00ff00'}],
['d', 'a', {color: '#00ff00'}],
['e', 'b', {color: '#00ff00'}]
]
}, {
nodes: ['a', 'b', 'c', 'd', 'e', 'f'],
edges: [
['a', 'd', {color: '#ff0000'}],
['b', 'e', {color: '#ff0000'}],
['c', 'f', {color: '#ff0000'}],
['d', 'f', {color: '#ff0000'}],
['e', 'd', {color: '#ff0000'}]
]
}]

drawGraph(graphs[2]);

$('#draw-graph').click(function() {
drawGraph(graphs[Math.floor(Math.random() * graphs.length)])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/springy/2.7.1/springyui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/springy/2.7.1/springy.js"></script>
<canvas id="graph-canvas" width=600 height=600>

</canvas>

<button id="draw-graph">
change graph
</button>




Answer

To solve the issue you are seeing don't create a new graph, layout and renderer for each graph, just clear the graph then load the new data.

var renderer;

function drawGraph(data) {

  if (renderer) {
      renderer.graph.edges.slice().map(function(edge) {
          renderer.graph.removeEdge(edge);
      });
      renderer.graph.nodes.slice().map(function(node) {
          renderer.graph.removeNode(node);
      });
      renderer.graph.loadJSON(data);  
  } else {
      var graph = new Springy.Graph();
      graph.loadJSON(data);
      renderer = $('#graph-canvas').springy({
         graph: graph
      });
  }
}

var graphs = [{
  nodes: ['a', 'b', 'c', 'd', 'e'],
  edges: [
    ['a', 'e', {color: '#0000ff'}],
    ['b', 'd', {color: '#0000ff'}],
    ['c', 'b', {color: '#0000ff'}],
    ['d', 'a', {color: '#0000ff'}],
    ['c', 'a', {color: '#0000ff'}]
  ]
}, {
  nodes: ['a', 'b', 'c', 'd', 'e'],
  edges: [
    ['a', 'e', {color: '#00ff00'}],
    ['b', 'a', {color: '#00ff00'}],
    ['c', 'e', {color: '#00ff00'}],
    ['d', 'a', {color: '#00ff00'}],
    ['e', 'b', {color: '#00ff00'}]
  ]
}, {
  nodes: ['a', 'b', 'c', 'd', 'e', 'f'],
  edges: [
    ['a', 'd', {color: '#ff0000'}],
    ['b', 'e', {color: '#ff0000'}],
    ['c', 'f', {color: '#ff0000'}],
    ['d', 'f', {color: '#ff0000'}],
    ['e', 'd', {color: '#ff0000'}]
  ]
}]

drawGraph(graphs[2]);

$('#draw-graph').click(function() {
  drawGraph(graphs[Math.floor(Math.random() * graphs.length)])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/springy/2.7.1/springyui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/springy/2.7.1/springy.js"></script>
<canvas id="graph-canvas" width=600 height=600>

</canvas>

<button id="draw-graph">
  change graph
</button>

Comments