The demo link

Making the address

scenario

A visual relationship network can be understood as the center is the current user, and the surrounding personnel are closely related to each role according to the weight distribution. Each person has a different number of roles and communication numbers.

Logical sorting:

  1. The ellipse is dynamically divided into different numbers of sectors;
  2. The elements in each area of the sector arc are located and processed by JS calculation of coordinate position
  3. The background is processed separately by placing it under the ellipse element by stacking the positioning layers
  4. Background gradient processing

implementation

Layout, background implementation

Cone gradient

The fan-shaped background color is filled by conic-gradient

  1. The calculation method of the elements on the ellipse is calculated according to the centrifugal Angle method (see below for details).

Problem: Elements that clearly see different color areas are misaligned, for example elements 2-10 should be in the yellow background, and elements 0-4 should be in the middle of the first yellow background

Solution:

  • The percentage in the taper gradient is handled in terms of Angle
  • Draw a circle with the radius of the short half axis
  • Transform: scale(2.2, 1) Pull the circle horizontally into an ellipse through scale.Major axis of ellipse: minor axis
  • Gradient by adding a maskmask-imageTo deal withmask-image
  1. The calculation method of the elements on the ellipse is calculated according to the central Angle

// Taper gradient background: conic-gradient(rgb(223, 232, 255) 0%, rgb(223, 232, 255) 20%, rgb(221, 241, 254) 20%, rgb(221, 241, 254) 40%, rgb(223, 249, 239) 40%, rgb(223, 249, 239) 60%, rgb(245, 231, 254) 60%, rgb(245, 231, 254) 80%, rgb(254, 244, 212) 80%, rgb(254, 244, 212), 100%); // Add mask-image: radial-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));Copy the code

Deformation function

The basic shape is a square or rectangle with a relatively long width and height. It is realized by cSS3’s transform: Skew function. As to how to tilt, you need to try skew

Step 1: Draw the ellipse, then define the child elements, each child element background is a rectangleStep 2: Tilt the rectangle. The corresponding Angle is shown in the picture below

In turn, bytransform: skewYTilt to finish:

Step 3: PassThe transform: scale (2.2, 1);Zoom to pull the circular background into an ellipse

Step 4: The width and height of the background parent element is a circle with a radius of the short half axisoverflow: hidden;Hide the excess display

Note: the maximum tilt Angle is 90 degrees, if the proportion is more than 50%, that is, more than 180 degrees, you need to use degree % 90-1 elements to complete

SVG implementation

Step 1: Draw the sector according to the coordinates

<svg xmlns="http://www.w3.org/2000/svg" id="bg"> <! --M: center coordinates (100,100) L: link line coordinates (240, 0)/A:100 long axis radius 50 short axis radius/starting Angle: 0 / Whether the great arc marks 0 / Direction (1 clockwise)/end point (x y) L: <path d="M 240 180 L 240 0 A 240 180 0 0 1 480 236 L 240 180" fill="#FFD2D2"></path> </ SVG >Copy the code

Fan out each area in turn

Step 2: Gradient background processing

<svg xmlns="http://www.w3.org/2000/svg"> <template v-for="(item, index) in pathList" :key="index"> <defs> <radialGradient :id="`svg${index}`" gradientUnits="userSpaceOnUse" :gradientTransform="`scale(${item.a / item.b}, 1)`" :cx="item.b" :cy="item.b" :r="item.b" spreadMethod="pad"> <stop offset="0" :stop-color="item.color" Stop-opacity ="1"/> <stop offset="0.2" :stop-color="item.color" stop-opacity="0.992" /> <stop offset="0.4" :stop-color="item.color" stop-offset ="0.6" :stop-color="item.color" stop-color=" 0.784" /> <stop offset="0.8" :stop-color="item.color" stop-color=" 0.488" /> <stop offset="1" :stop-color="item.color" Stop-opacity ="0.166"/> </radialGradient> </defs> <path :d="item.path" :style="{'fill': `url(#svg${index})`}"/> </template> </svg>Copy the code

The background is also a full circle with a radius of the short half axis scaled horizontally

JS dynamically calculates node positions

Emmm dynamic certainly need to calculate, what ellipse equation, radian, focus, sine, cosine all back to the teacher o(╥﹏╥) O, re pick up

Math.sin(x) The sine of x. The number of returns between -1.0 and 1.0

Math.cosine of x is the cosine of x. Returns numbers between -1.0 and 1.0

The X in both of these functions refers to radians, not angles

The formula for calculating radians is: Angle * (PI/180)

Angle and radian conversion

  1. Angle definition: Two rays are emitted from the center of a circle towards the circumference, forming an Angle and an arc opposite the Angle. When the arc length is exactly 1/360 of the circumference, the Angle between the two rays is 1 degree. (Unit: º)
  2. Definition of radian: Two rays are emitted from the center of a circle towards the circumference, forming an Angle and an arc opposite the Angle. When this arc length is exactly equal to the radius of the circle, the Angle between the two rays is 1 radian (rad).

It can be simply interpreted as: Radians = arc length/radius

  1. Arc length and radians

    1. The formula for calculating the circumference of a circle C is: C = 2πr = πd (r – radius; D – diameter)
    2. The arc length of a circle is: 2πr (arc length = circumference)
    3. 2πr/r = 2π

  2. The conversion of radians to angles is based on the fact that the circle is 360º and the radians are 2π, i.e. 360º = 2π

    1. Angle of radian: 2π / 360 = π / 180 ≈ 0.0174rad, that is: degree * (π / 180) = radian

    For example: Convert 30º to radian rad 30º * (π / 180) = 0.523320 rad

    1. Degrees: 360/2 π = 180 / π ≈ 57.3º, that is, radians * (180 / π) = degrees

    For example, convert 0.523320rad to degree 0.523320rad * (180 / π) = 29.9992352688º

Compute the coordinates of each element on the ellipse

The calculation method of central Angle

The first sector is actually a blue background

I want it to rotate clockwise from 12 o ‘clock, and I want to deal with the current Angle which is Angle -90

// The Angle ratio is allocated according to the Angle ratio. Math.pi /180 // The initial value (starting point) is 12 o 'clock, Const radian = (angle-90) * math.pi / 180; const r = a * b / (Math.sqrt(Math.pow(b * Math.cos(radian), 2) + Math.pow(a * Math.sin(radian), 2))); const x = r * Math.cos(radian) + a; const y = r * Math.sin(radian) + b;Copy the code
Calculation method of centrifugal Angle

It is assumed that the center coordinates of the ellipse are (a, b) according to the values of the sine and cosine of the triangle. A is the major semi-axis, and B is the minor semi-axis

X = a + math.sin (Angle * (math.pi / 180)) * a)

Y coordinate = b – math. cos(Angle number * (math.pi / 180)) * b

// The initial value (starting point) is 12 o 'clock, Const radian = Angle * math.pi / 180; const x = a + Math.sin(radian) * a; // here is the '-' sign, because we want to get Y relative to (0,0) const Y = b - math. cos(radian) * b;Copy the code

Note: the centrifugal Angle method looks better visually, but if the area distribution is not uniform, the distribution of the long half axis part and the distribution of the short half axis part will look a little different from the same Angle. Both methods can be implemented, depending on which one is suitable

Chi Chi chi chi to learn a, is the painting is calculated refueling you are the most half moon

Scheme comparison

Taper gradient, deformation function

Advantages: CSS implementation, Conic-gradient, Transform: Skew

Disadvantages:

  1. Gradient through the maskmask-image: radial-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));Processing, is the processing of the overall background, can not do the processing of a single sector area, too stiff
  2. Both tapered gradients and tilts are handled with the shape of a circle with a short half-axis radius, which needs to be scaled

SVG implementation

Advantages: background gradual transition natural, achieve the best effect

Disadvantages: need JS to dynamically calculate the coordinate position to draw the sector area

Refer to the article

  • Theta in elliptic parametric equations
  • Elliptic parametric equation
  • Centrifugal Angle