spacetree組織架構圖 實現異步加載子節點，和定製化內容展現

spacetree組織架構圖

說明

jquery插件皆可用於react,使用方法:react中使用jquery插件

效果圖

定製化內容的效果圖

插件說明

很好的canvas的組織架構圖，從上到下按層級展現彙報關係,
 支持定製化內容，和異步加載子節點(下面會講到)。
 相關api請參考：

官網
或是example1.js

數據格式

var data = {
         id:01,      //每一個節點有一個惟一的標示
         data:{},    //存放每一個節點數據
         children:[  //存放元素子節點
            {
            id:011,
            data:{},
            children:[]
         },
         {
            id:012,
            data:{},
            children:[]
         }
         ]
     }

開發中的痛點問題

插件默認加載所有數據，當後臺數據量太大，一次返回時，
 會形成頁面卡死，用戶體驗至關很差。且在開發中，用戶希
 望可以根據數據定製每一塊的內容展現。

#### 解決辦法1

對於第一個問題：每次只返回兩層的數據,(注意，全部的數據必需要有一個不重複的id)
 剩下的數據能夠經過異步加載的方式給架構圖添加子節點
 在官網上找到一個辦法,當經過ajax請求回來的數據後經過：

st.addSubtree(data, type, {   //st指的是建立的樹對象，能夠將其設爲全局變量，
                                        以便外面拿到
                                      //data即ajax獲取的值
                                      //type:"animate":"replot"
            hideLabels: false,
            onComplete: function() {   //加載完成後的回調
                Log.write("subtree added");
            }
        });

同時還有另一個api,用於刪除子節點

st.removeSubtree(id, true, 'animate', {   //id:想要刪除子節點的節點的id標識
                            hideLabels: false, //動畫執行過程當中是否隱藏節點
                            onComplete: function() {
                              removing = false;
                              Log.write("subtree removed");
                            }
                        });

解決辦法2

對於第二個問題：一樣有一個api用lai定製化每一個節點的內容
 onCreateLabel:裏面有兩個參數label,node:label指的是容器
 div,node指的是每塊對應的數據，這裏用jquery的方式根據數據
 動態生成內容。

onCreateLabel: function (label, node) { //
            label.id = node.id;
            var level = ['第一層','第二層','第三層','第四層','第五層','第六層'];
            var wrap = '<div class="wrap">'+
                          '<div class="level"></div>'+
                          '<div class="secondLevel"></div>'+
                          '<div class="level"></div>'+ 
                        '</div>'
            var $wrap = $(wrap);
            $wrap.find('.secondLevel').text(node.name);
            $wrap.find('.level').text(level[node._depth])            
            $(label).append($wrap);
        }

最後附上github地址,歡迎star