Infovis: How to clear a canvas?

Question

I'm using Infovis to show a SpaceTree. After some manipulations with data I'd like to have an ability to clear Canvas and re-initialize the tree with a new data set. How can I do that?

My current code is next (it's CoffeeScript):

  # Create a new ST instance  
  st = new $jit.ST
    # id of viz container element  
    injectInto: 'infovis',  
    # set duration for the animation  
    duration: 800,  
    orientation: "top",
    # set animation transition type  
    transition: $jit.Trans.Quart.easeInOut,  
    # set distance between node and its children  
    levelDistance: 25,  
    # enable panning  
    Navigation: {  
      enable:true,  
      panning:true  
    },  
    # set node and edge styles  
    # set overridable=true for styling individual  
    # nodes or edges  
    Node: {  
      align: "left",
      autoHeight: true,  
      autoWidth: true,  
      type: 'rectangle',  
      color: '#000',  
      overridable: true  
    },    

    Edge: {  
      type: 'bezier',  
      overridable: true  
    },  

    onBeforeCompute: (node) =>  
      console.log("loading " + node.name)

    onAfterCompute: =>  
      console.log("done")

    # This method is called on DOM label creation.  
    # Use this method to add event handlers and styles to your node.  
    onCreateLabel: (label, node) =>  
      label.id = node.id;              
      label.innerHTML = node.name;  
      label.onclick = () ->
        st.onClick(node.id);  

      # set label styles  
      style = label.style;  
      # style.width = 60 + 'px';  
      # style.height = 17 + 'px';              
      style.cursor = 'pointer';  
      style.color = '#fff';  
      style.fontSize = '1em';  
      style.textAlign= 'center';  
      style.margin = '0px';

    # This method is called right before plotting a node. 
    # It's useful for changing an individual node style properties before plotting it.  
    # The data properties prefixed with a dollar sign will override the global node style properties.  
    onBeforePlotNode: (node) =>  
      # add some color to the nodes in the path between the  
      # root node and the selected node.  
      if node.selected   
        node.data.$color = "#007";  
      else   
        delete node.data.$color;  
        # if the node belongs to the last plotted level  
        if !node.anySubnode("exist")  
          # count children number  
          count = 0;  
          node.eachSubnode (n) => 
            count++; 
          # assign a node color based on  
          # how many children it has  
          node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                       

    # This method is called right before plotting an edge. 
    # It's useful for changing an individual edge style properties before plotting it.  
    # Edge data properties prefixed with a dollar sign will override the Edge global style properties.  
    onBeforePlotLine: (adj) =>
      if adj.nodeFrom.selected && adj.nodeTo.selected 
        adj.data.$color = "#eed";  
        adj.data.$lineWidth = 3;
      else   
        delete adj.data.$color;  
        delete adj.data.$lineWidth;  

  # load json data  
  st.loadJSON(json[0]);  
  # compute node positions and layout  
  st.compute();  
  # optional: make a translation of the tree  
  st.geom.translate(new $jit.Complex(-200, 0), "current");  
  # emulate a click on the root node.  
  st.onClick (st.root)

Thanks in advance!

score 1 · Answer 1 · answered Feb 13 '14 at 06:29

You can use clear() function which is available on canvas class. http://philogb.github.io/jit/static/v20/Docs/files/Core/Canvas-js.html

Try this.

st.canvas.clear()

You can re-initialize the space tree instance with new data set after clearing the canvas using clear() function.

To load the new data you can use loadJSON( json, i ) where json is the new json data set and i is the index of root node in json.

Check this: http://philogb.github.io/jit/static/v20/Docs/files/Loader/Loader-js.html#Loader.loadJSON

This only deletes the edges in my case, not the nodes – Marian Klühspies May 30 '14 at 08:17 — Marian Klühspies, May 30 '14 at 08:17

score 1 · Answer 2 · answered Jun 27 '16 at 07:06

1

After trying by many ways i found the solution.Do folowing,

$("#infovis").html("");
and call init() method with new data

This is a working solution !

answered Jun 27 '16 at 07:06

Ashitosh birajdar

470
4
12

score 0 · Answer 3 · answered Feb 13 '14 at 06:30

0

context.clearRect ( x , y , w , h );

or

canvas.width = canvas.width;

answered Feb 13 '14 at 06:30

Nevin Madhukar K

3,031
2
25
52

score 0 · Answer 4 · answered Oct 22 '14 at 16:13

st.canvas.clear() didnt really have the desired effect for me. It clears the canvas visually but then I found if I clicked on the canvas, the labels would reappear. Below is the function I eventually came up with. Its a bit of a belt and braces approach but st.loadJSON({}) was really the only thing that actually cleared the canvas to my satisfaction.

function ClearSpaceTree()
{
    st.clearNodesInPath();
    st.labels.clearLabels(true);
    st.canvas.clear();
    st.loadJSON({}); // Pass in an empty object
}

EDIT: Apologies - just noted you wanted to reinitialise with new data. Its already been answered however. st.loadJSON(yourdata) is the way to go.

Infovis: How to clear a canvas?

4 Answers4