2

我正在使用 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)

提前致谢！

4

4 回答 4

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

于 2014-02-13T06:29:12.560 回答
1

经过多种方式尝试后，我找到了解决方案。请执行以下操作，

$("#infovis").html("");
并使用新数据调用 init() 方法


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

于 2016-06-27T07:06:28.307 回答
0

context.clearRect ( x , y , w , h );

或者

画布.宽度=画布.宽度；

于 2014-02-13T06:30:16.970 回答
0

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-22T16:13:26.333 回答