Hello, everyone!
Today I'm going to introduce you DAYU
Overview
After the hierarchical layout is done, the relative positions of the nodes on each layer are basically determined. Our simplest way is to tile all nodes on each layer with a fixed width and a fixed spacing. The position of each node is basically determined. Up. We just need to connect based on these nodes.
Scheme ideas
Straight line
The simplest way is a straight line. We only need to determine the relative specific coordinates between two nodes, and then draw a straight line between the two points. The effect is as follows
As can be seen from the above figure, the straight line is relatively simple to implement, but it is still acceptable if there are few nodes. If there are too many nodes and the lines are complex, there is basically no way to see it, and the effect is not very good.
Curve way
Curve is a relatively common way, here you can use the third-order Bezier curve or the second-order Bezier curve, just calculate the corresponding control points. But these control points are not very good calculations, and some general control points, in some complex situations, the display effect is not very good, and I do not plan to use this here.
Polyline method
It is through the polyline, Manhattan method, inflection points in the blank places, to connect, this method can make good use of space, and can avoid nodes, and there will be no overlap between lines and nodes. Here I used this the way. Due to our business scenario, there are many nodes and not many levels. Here I speculatively adopted a relatively simple way to draw this polyline. First look at the effect
In the above situation, we consider the simplest scenario, which is to draw this polyline with 4 points at most. This drawing method should be the simplest. Because the graph is drawn from top to bottom, we only need to consider the Y coordinate of the intermediate node. But consider as far as possible not to let the lines overlap. We can sort the nodes of each layer according to the x coordinate , and then when drawing the line, follow the x axis, from left to right, and make sure that each line has no overlapping parts.
Implementation
Node ordering
function divideNodesIntoLayer(nodeList){ // Clear the cached line segment combination nodeLines = {}; var lineNodes = {}; for(var layer = 1; layer <= maxGraphLayer; layer++){ lineNodes[layer] = []; for(var j = 0; j <nodeList.length; j++){ if(nodeList[j].layer === layer){ lineNodes[layer].push(nodeList[j]); } } lineNodes[layer].sort(function(a, b){ return ax-bx; }) } return lineNodes;}From the place 40px away from the lower node, traverse upwards, increasing by one step each time, judging whether to use overlap, until a non-overlapping Y value is found.
function calcMidY(){
var midY = endY-40;
while (true) {
var flag = false;
if (nodeLines[layer]) {
for (var i = 0; i <nodeLines[layer].length; i++) {
var line = nodeLines[layer][i];
if (line.startY === midY) { // Determine if overlap
if (checkCross(startX, endX, line.startX, line.endX)) {
flag = true;
}
}
if (flag) break;
}
} else {
nodeLines[layer] = [];
}
if (!flag) break;
midY -= lineDis;
}
if (startX !== endX) { // Cache the line segments that have been drawn
nodeLines[layer].push({
startX: startX,
startY: midY,
endX: endX,
endY: midY })
}}After finding the Y value of the inflection point, the coordinates of the entire polyline are clear, just dash the line based on the 4 dots.
to sum up
The above is a very simple way to implement. When encountering complex scenes, there will still be overlapping lines. A more accurate approach is to avoid all obstacles and find a path. This complicated approach will be tried further in the future
