Infovis：如何清除畫布？

Question

我使用的是Infovis來顯示SpaceTree。在對數據進行一些操作後，我希望能夠清除畫布並用新的數據集重新初始化樹。我怎樣才能做到這一點？

我當前的代碼是下一個（它的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

您可以使用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

context.clearRect（X，Y，W，H）;

或

canvas.width = canvas.width;

Answer 3

st.canvas.clear（）對我來說確實沒有達到預期的效果。它以可視方式清除畫布，但之後我發現如果單擊畫布，標籤會重新出現。以下是我最終想到的功能。它有點像腰帶和大括號，但是st.loadJSON（{}）確實是唯一真正清除畫布的東西，讓我滿意。

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

編輯：道歉 - 只是指出你想用新數據重新初始化。它已經被回答了。 st.loadJSON（yourdata）是要走的路。

Answer 4

通過多方面努力後，我發現了solution.Do如下因素，

$（ 「＃infovis」）HTML（ 「」）。
並用新數據調用init（）方法

這是一個工作解決方案！