Web Chart Getting Started (3) graphics layout-layout

Objective

From an article on:

[Web Chart Series II] All kinds of library to achieve JS chart summary and comparison

, there is still a lot of information available to provide the library to draw the vector graph.

If you just need to draw some bar chart, pie chart, scatter chart, time series diagram such as some simple diagram, from the listed library can find a lot of choices.

However, if you need to draw a structure diagram, correlation diagram, such as some large amount of data, logic slightly complicated diagram, page layout is a big problem to face.

D3.js provides a more advanced layout of the page, a tree diagram, an explosion diagram, and a three-dimensional diagram. And there are Eco System (understood as a derivative library) dedicated to implementing layout with its development. But the more fatal is d3.js for IE's support is not good.

JavaScript Infovis Toolkit, a pilot project for Sencha (a company that develops ExtJS). also provides a tree diagram of the animation effect, Force Guide diagram. The disadvantage is that the layout part of the code tightly bound in other code, want to peel or change, it is more difficult.

Discussion of the layout

Only two layouts are discussed here: trees and graphs. Why do we only discuss these two kinds of? Pie charts, columnar graphs are fairly simple, and there are a large number of existing components available to use. Three-dimensional diagram, the author is not involved in this part of the temporary, so it is not discussed.

The first question to be clear is: what is the difference between a tree and a diagram?

The intuitive feeling seems to be: to the left or right or up or down two directions is a tree, extending in any direction around the diagram.

This kind of feeling is unscientific in science. There is a clear definition of trees and graphs in the data structure. The biggest difference is:

Tree: A node has only a parent node.

Figure: A node can have any number of parent nodes.

In this sense, trees can also be circular.

However, the concept of the tree and graph discussed here is somewhat biased towards intuitive understanding: The tree is extended in either direction or two directions, and the graph is extended in any direction to the layout.

The layout of the tree

Tree layout algorithm is relatively simple, only need to follow some basic principles on it:

1. A certain distance should be maintained between nodes in the same layer.

2. The parent node needs to be in the central location of all child nodes it contains

3. The whole tree should be kept as symmetrical and balanced as possible.

4. The same subtree should have the same rendering effect as possible

5. In a situation that does not violate the rules above, the tree should try to save space.

Layout of graphs

The layout of the diagram is many, combined, the following 2 kinds of common

1. Ring

The circular diagram is divided into two kinds

A) Concentric circles: All the child node layers are spread around a dot.

b ambidexterity Circle: Each child node is the center of the next Level child node.

2. Force Guide (force-directed)

This layout does not care about the logic of the business data, but simply displays the graphics from the most aesthetically pleasing effects.

Used to the concept of physics.

A detailed description of this layout is available later.