Notes Automatic layout adjustment algorithm for moving node after Node-link visualization

Automatic layout adjustment algorithm for moving node after Node-link visualization

If the project, Hypergraph visualization, with Node-link can be said to be more than mature, whether it is d3.js or a variety of other JavaScript libraries such as Sigma.js. However, most of the library is SVG, on the one hand, SVG is more convenient to bind events, on the other hand, SVG is also easy to define CSS to extend the style. Based on the implementation of the canvas is also a lot, feel at present more beautiful point is gojs, although free but not so open source of at least JS file uglify, open source is very good vis.js. But the favorite is the TensorFlow visualization, each block can be shrunk and expanded:

Later, I want to use a super-graph visualization tool to manage their own things, so the impulse is the devil to write their own. The current implementation is not particularly complete, first put out the back there is time to slowly polish.
Https://github.com/dna2github/dna2petal/blob/master/codon/petal-codon.js

Design

Functionally, codon is to have block container contraction and expansion function, this involves the operation of the diagram, as a basic lib, for the time being. If a container is shrunk (internal nodes and related edges are removed from the visual list) or expanded (internal nodes and related edges are added to the visual list), then the container corresponding size needs to be adjusted, so that the nodes can be easily manipulated, They should not be stacked up to be like force layout. When a node is moved, the entire layout needs to be recalculated if there is a stack between the nodes. Of course, zoom and pan in visualizations are also necessary. Another function is to automatically sort the visual objects in order to better show the relationship between the nodes (such as Hello and the world node connected, the World node is a child node of the container node, If the side of Hello and world is not properly sorted by container when painting, it will make people think that Hello and container are connected.

Realize

Zoom and pan words in the code is not yet implemented, but the canvas context 2d has scale and translate function, or relatively convenient, then paint before save, after restore, mastering a good rhythm there is no problem.
Painting when the sort is not difficult, topological sort, with parent-children relationship, first draw the parent, then draw and children related side, the last draw children on it.
It is easy to adjust the layout of a node after it is moved, without regard to efficiency.
The following is a detailed talk about layout adjustment.

When initialized, there are 7 nodes a b C D E F G, where B C is a child node and F G is a child of E.

When C is moved, because C is a child node, so a must be able to display a C, then recalculate the box of a.

The following is the conflict judgment at the level of C, because C moves, and all other child nodes of a have no positional conflicts, so b C completes layout.
Then run to a layer to judge the conflict, a can be considered as the entire canvas sub-node, then it and the other two nodes D e judgment, found that D and a conflict. At this point, the center of a rectangle, connected to the center of D, D along the connected Ray away from a move, with the form of multiplication distance to search for the largest conflict-free location, and then in the region to find a binary sub-location of the minimum movement of the conflict-free position.

At this point, the layout of A and C is completed, to e when found and C conflict, the same, the center of a is also a central, the position of F is recalculated.

After the position of E is recalculated, the sub-nodes of D and E are translated accordingly. There are no child nodes in D, there are f and G in E, so the position of F and G is adjusted, and F and G have no child nodes, no recursive.

Finally, a new layout was obtained.

The version given in the code, the maximum number of binary search calculation is not very good, if the node is more, there may be some nodes are bouncing open distance is larger.

Notes Automatic layout adjustment algorithm for moving node after Node-link visualization