Infovis : 캔버스를 지우는 방법?

Question

Infovis를 사용하여 SpaceTree를 표시하고 있습니다. 데이터를 조작 한 후에는 Canvas를 지우고 새 데이터 세트로 트리를 다시 초기화 할 수있는 기능이 필요합니다. 어떻게해야합니까?

내 현재 코드는 다음이다 (이것은 커피 스크립트의) : 사전에

# 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 (W, X, Y, H);

또는

canvas.width = canvas.width;

Answer 3

st.canvas.clear() didnt는 실제로 나를 위해 원하는 효과가 있습니다. 캔버스를 시각적으로 지 웁니다. 그러나 캔버스를 클릭하면 레이블이 다시 나타납니다. 아래는 내가 결국 생각해 낸 기능입니다. 그 벨트와 중괄호가 약간 접근하지만 st.loadJSON ({})이 사실 캔버스를 실제로 만족시키는 유일한 방법이었습니다.

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

EDIT : 사과 - 새로운 데이터로 다시 초기화하고 싶다고 말한 것입니다. 그것은 이미 그러나 응답되었습니다. st.loadJSON (yourdata)가 방법입니다.

Answer 4

여러 가지 방법으로 시도 후 나는 solution.Do folowing을 발견

$ ("#의 infovis") HTML (".");
및 새 데이터로 init() 메소드를 호출하십시오.

이것이 해결책입니다!