2

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)

前もって感謝します！

4

4 に答える 4

1

多くの方法で試した後、解決策を見つけました。

$("#infovis").html("");
新しいデータで init() メソッドを呼び出します


これは有効なソリューションです。

于 2016-06-27T07:06:28.307 に答える
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 に答える