AMD and CMD are dead kmd.js rely on visualizer publishing

Use

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"] }        ]    }))});

which

Renderto is a container

Width and height are the width and height of the container

Data is a module and a dependency

Please refer to http://raphaeljs.com/by yourself when using

Preview

Among them, the reference relationship from the bottom up, the above module refers to the following module, the thick line represents a reference relationship between the adjacent level, the thin lines represent the cross-levels between the reference relationship.

Technical details

This tool is completely based on http://raphaeljs.com/development, so compatibility is good, RAPHAELJS support ie6+, but because ie678 does not support the SVG element getbbox to get the width of text, so in the old version of IE can hardly look straight, Therefore, it is recommended to use modern browsers.

Tree-like programming:

To generate a tree-like dependency graph, proceed through the following procedure:

1. Find the lowest level of the module, that is, level 0, they do not rely on any module

2. Starting at the bottom, recursively refer to the upper-level module, then up, in order to calculate levels for each module, which must meet

A. must be dependent on the previous layer

B. Do not rely on the same layer or other layers

c.level++

Drawing of dependent lines:

Through the pipeline above, the level of each module is traversed, when the drawing depends on the line, depending on the level of the difference between the drawing of a thick or thin line, also determines the color of the line.

Layout Auto-fit:

Where the layout automatically relies on Getbbox to get the height and width of the SVG text elements, calculates various widths and gaps, ie678 does not support, then has to abandon ie678.

The width height of the rounded background of the text is determined by the width of the text

The left and right spacing between the text and the container of the rounded background is determined by the number of modules per layer (level)

The upper and lower spacing between the text and the container of the rounded background is determined by the value of Max level

Online Demo

Portal: http://htmlcssjs.duapp.com/demo50/index.html

Deptree.js Download: http://htmlcssjs.duapp.com/demo50/deptree.js