AntV’s G6 library is dedicated to dealing with diagrams and has good bindings and interfaces to use. However, in practical requirements, we need to deal with the multi-degree relationship between two nodes, which requires a better edge distribution, or a better node distribution plan for the whole graph.

The distribution of edges

Two dimensional Bessel

Take the simplest case, two points, and the first solution is to use a two-dimensional Bezier curve with the spread points of the curve on the vertical bisectors of the two points:

In this way, the upper and lower discrete points can be guaranteed, and the area between two points can be used to draw edges to a greater extent.

However, the intersection of starting line segments is easy to occur in the case of multi-point multilateralism.

Therefore, for the complex situation of multiple points, the distribution points should be reasonably based on the access degree.

You also need to deal with too much/too little edge space due to slope.

The following example is six points with 100 edges.

As for the text description, the text description can be added in the center of Bezier curve, and the effect is shown as follows:

Come to your own side

Considering the relationships in polygraph and self to self edges, we use arcs to represent self to self relationships.

After determining the center, we need to obtain the radius of the point, with the Angle k as the variable for later adjustment.

Consider the simplest case, and draw a circle along a vertical radius

Now for the complicated case, we rotate the diameter by k degrees and add text

Three points

Arc link

Consider a scenario where one point has a large number of edges to two other points, but the remaining points are infinite or have a small number of edges. We can use arcs to connect three points.

Similarly, in the case of two points, the center of the circle is on the vertical bisector of the two points, and the arc passes through the two points. When there are multiple arcs, we adopt different centers to calculate the shape of the arc.

Here’s what happens multilaterally:

The figure above shows six nodes with a total of 100 edges

A more suitable use for a hypothetical scenario:

To Be Done

Functional concept: retractable edges

We can add components to the edges to simplify the view by shrinking too many edge relationships.

The distribution of points

One of the most important optimization of multivariate graph is to generate a reasonable point distribution, so the idea of point distribution is as follows

The first idea: the distribution of points based on circles and weights follows two rules:

  • The universal edge is distributed by the center of the circle
  • The fault edge goes out of hand

This is the distribution of points based on the above principle, which is simple and reasonable as can be seen:

Second idea: point distribution based on spanning tree

  • According to the sum of the absolute values of the output degree and the input degree of the graph, all points between the two points are counted as the weight of this edge, and the weight of a node is the sum of the weight of the edge. Then, the minimum spanning tree is generated according to the size of the weight.
  • According to the weights of nodes, we can divide the large points and distribute them independently, while the small points are distributed in turn on the circle with the weight points as the center.
  • If constructed as a tree, the calculated tree structure should be distributed diagonally from the canvas.

The code can be found at github.com/mxz96102/an… find