Question

我正在使用Infovis来展示SpaceTree。在对数据进行一些操作之后，我希望能够清除Canvas并使用新数据集重新初始化树。我怎么能这样做？

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

通过多种方式尝试后，我找到了解决方案。请继续，

$（＆＃34;＃infovis＆＃34）。HTML（＆＃34;＆＃34）;
用新数据调用init（）方法

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

Answer 3

context.clearRect（x，y，w，h）;

或

canvas.width = canvas.width;

Answer 4

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（你的数据）是要走的路。

Infovis：如何清理画布？

4 个答案: