Infovis:如何清除画布？

Question

我正在使用Infovis显示一个SpaceTree。在对数据进行了一些操作之后，我希望能够清除画布并使用新的数据集重新初始化树。我该怎么做呢？

我当前的代码是next (它是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)

提前感谢！

Answer 1

您可以使用canvas类中提供的clear()函数。http://philogb.github.io/jit/static/v20/Docs/files/Core/Canvas-js.html

尝尝这个。

st.canvas.clear()

在使用clear()函数清除画布后，您可以使用新数据集重新初始化空间树实例。

要加载新数据，可以使用loadJSON( json, i )，其中json是新的json数据集，i是json中根节点的索引。

检查这个：http://philogb.github.io/jit/static/v20/Docs/files/Loader/Loader-js.html#Loader.loadJSON

Answer 2

在尝试了很多方法之后，我发现solution.Do如下所示：

$("#infovis").html("")；

并使用新数据调用init()方法

这是一个有效的解决方案！

Answer 3

context.clearRect (x，y，w，h )；

或

canvas.width = canvas.width;