使用

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是模塊和依賴關系

使用時候請自行引用http://raphaeljs.com/

預覽

其中，引用關系自下而上，上面的模塊引用下面的模塊，粗的線條代表相鄰level之間有引用關系，細線代表跨級（level）間的引用關系。

技術細節

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

樹狀程序設計：

要生成樹狀依賴關系圖，要經過下面程序步驟：

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

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

????? a.必須依賴上一層???

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

????? c.level++

依賴線條的繪制：

經過上面的管線，每個模塊的level遍歷出來，當繪制依賴于線條的時候，根據level之差決定繪制粗線還是細線，也決定了線條的顏色。

布局自動適應：

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

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

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

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

在線演示

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

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

轉載于:https://www.cnblogs.com/iamzhanglei/p/3798987.html

總結

以上是生活随笔為你收集整理的AMD and CMD are dead之KMD.js依赖可视化工具发布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。