Infovis：如何清除画布？

我使用的是Infovis来显示SpaceTree。在对数据进行一些操作后，我希望能够清除画布并用新的数据集重新初始化树。我怎样才能做到这一点？Infovis：如何清除画布？

我当前的代码是下一个（它的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)

提前感谢！

来源

2014-02-12 temkin

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

来源

2014-02-13 06:29:12

这只会删除我的情况下的边缘，而不是节点 –

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

或

canvas.width = canvas.width;

来源

2014-02-13 06:30:16

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）是要走的路。

来源

2014-10-22 16:13:26

通过多方面努力后，我发现了solution.Do如下因素，

$（ “＃infovis”）HTML（ “”）。
并用新数据调用init（）方法

这是一个工作解决方案！

来源

2016-06-27 07:06:28

Infovis：如何清除画布？

回答

相关问题