[Web chart Series 3] Layout

Preface

From the previous article:

[Web chart Series II] a variety of Introduction to library summarization and comparison for JS charts. There are still a lot of libraries that provide vector graph rendering. If you only need to draw some simple charts such as bar chart, pie chart, scatter chart, and sequence chart, you can find many choices from the listed libraries. However, if you want to draw a structure chart, the page layout is a big problem if the associated diagram contains a large amount of data and the logic is slightly complex. D3.js provides a relatively advanced page layout, tree layout, explosion map, and 3D map. And there is an eco system that specifically uses its development to implement layout (understood as a derivative library ). However, it is fatal that d3.js does not support ie well. Javascript infovis toolkit is an experimental project of sencha (extjs R & D Company. It also provides a tree chart with animation effects and a force-directed graph. The disadvantage is that some layout code is tightly bound to other codes. It is difficult to strip or modify the code.

Here we only discuss two la S: Tree and graph. Why do we only discuss these two types? The pie chart and bar chart are quite simple and can be used by a large number of existing components. 3D graph. I have not joined this part yet, so I will not discuss it. The first thing to clarify is: What is the difference between a tree and a graph? Intuitively, it seems that the tree is extending in the left and right directions or in the upper and lower directions, and the graph is extending in any direction around. This feeling is not scientific. Tree and graph are clearly defined in data structure. The biggest difference is: Tree: A node only has a parent node. Figure: A node can have any number of parent nodes. In this sense, the tree can also be circular. However, the concept of the tree and graph discussed in layout here is a bit more intuitive: the tree is extended either in the left and right directions or in the upper and lower directions, and the graph is extended in any direction around. The Layout Algorithm of the tree is relatively simple. You only need to follow some basic principles: 1. Keep a certain distance between nodes on the same layer. 2. The parent node must be located at the center of all its child nodes. 3. The entire tree should be symmetric and balanced as much as possible. 4. The presentation of the same subtree should be as effective as possible. 5. The tree should save as much space as possible without violating the above rules. Graph Layout

There are many ways to deploy a graph. In combination, there are two common ways:

1. A ring chart is divided into two types. a) concentric circles: All subnode layers are centered around one dot. B) exclusive circle: Each subnode is the center of the next subnode. 2. The force-directed layout does not care about the logic of the business data, but only displays the image in the most elegant way. It uses concepts in physics. This layout will be described in detail later.