使用

require("MyAapp.DepTree", function (DepTree) {
    DepTree(({
        renderTo: "holder",
        width: "820",
        height: "580",
        data: [
            { "name": "System" },
            { "name": "Util" },
            { "name": "System.Model", "deps": ["System", "Util"] },
            { "name": "System.Model.Animate", "deps": ["System.Model"] },
            { "name": "System.Model.User", "deps": ["System.Model.Animate", "Util"] },
            { "name": "OurApp", "deps": ["System.Model.User", "Util"] }
        ]
    }))
});

其中：

renderTo是容器

width和height是容器的寬高

data是模塊和依賴關(guān)系

使用時(shí)候請(qǐng)自行引用http://raphaeljs.com/

預(yù)覽

其中，引用關(guān)系自下而上，上面的模塊引用下面的模塊，粗的線條代表相鄰level之間有引用關(guān)系，細(xì)線代表跨級(jí)（level）間的引用關(guān)系。

技術(shù)細(xì)節(jié)

此工具完全基于http://raphaeljs.com/開發(fā)，所以兼容性良好，raphaeljs支持IE6+,但是由于ie678不支持svg元素的getBBox來(lái)獲取text的寬高，所以在老版本ie下幾乎不能直視，所以建議使用現(xiàn)代瀏覽器。

樹狀程序設(shè)計(jì)：

要生成樹狀依賴關(guān)系圖，要經(jīng)過(guò)下面程序步驟：

1.找到最底層的模塊，也就是level為0，他們不依賴于任何模塊

2.從最底層開始，遞歸找引用上層的模塊，依次向上，目的就是計(jì)算每一模塊的level,是該層必須滿足

      a.必須依賴上一層   

      b.不依賴同層或者其他層的

      c.level++

依賴線條的繪制：

經(jīng)過(guò)上面的管線，每個(gè)模塊的level遍歷出來(lái)，當(dāng)繪制依賴于線條的時(shí)候，根據(jù)level之差決定繪制粗線還是細(xì)線，也決定了線條的顏色。

布局自動(dòng)適應(yīng)：

其中，布局自動(dòng)使用依賴于getBBox獲取svg文本元素的高度和寬度，計(jì)算各種寬度與間距，ie678不支持，便只好放棄ie678。

文本的圓角背景的寬高由文本的寬高決定

文字與圓角背景的容器之間的左右間距由每一層（level）的模塊的個(gè)數(shù)決定

文字與圓角背景的容器之間的上下間距由max level的數(shù)值決定

在線演示

傳送門：http://htmlcssjs.duapp.com/demo50/index.html

DepTree.js下載：http://htmlcssjs.duapp.com/demo50/deptree.js