This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

See the Data Visualization column for a series of articles

Reference:

  • Learn D3: Shapes
  • Shapes (d3-shape)
  • D3-shape (Unofficial Chinese Translation)

Area generator Areas

Area generator Areas is similar to line segment generator in that it also generates line segments (or curves) based on a given coordinate point, except that it generates two boundaries:

  • Upper boundary topliney1
  • Baseline of lower Boundary Liney0In general, the lower boundary is set to constanty0=0

Generally, the abscissa of two line segments is the same, x0=x1, but the ordinate is different. The area between the two boundaries is the target area

Method of used3.area([xFunc], [y0Func], [y1Func])Create an area generator (hereinafter calledarea).

It is both a method that can be called directly, passing as an input the data that needs to be visualized (an array). (Actually these parameters are called internally by the corresponding method, for example, when creating an area generator, Pass the x-coordinate reading functions xFunc and the upper and lower boundary ordinates reading functions y0Func and y1Func as input parameters; Then, when the area generator is called, these three functions are called for each element of the array to get the corresponding coordinate value) to create the area.

It is also an object that has multiple methods for setting different parameters, and is typically used in chained calls:

  • Area.x (xFunc), like area.x0(xFunc), is used to set the lower boundary x-coordinate reading function

  • Area.x0 (xFunc) sets the lower boundary abscissa reading function, which is executed once for each element in the array when the segment generator is called to return the abscissa corresponding to that data.

    This function also takes three input arguments (as other area generator methods usually do) : the current element D, the element’s index I in the array, and the entire array data. Through these input parameters, generally using scale mapping, return the corresponding abscissa value.

    D3 by default, when using the segment generator, the format of the array passed in is [[10, 60], [40, 90], that is, each element is an array composed of two values, so its default x-coordinate reading function is as follows

    function x(d) {
  return d[0];
}
Copy the code

    💡 If the elements in the array are not the default structure described above, but some other more complex structure, or if the data is not a coordinate value, you need to configure the x-coordinate read function

  • Area.x1 (xFunc) sets the upper boundary x-coordinate reading function. By default, the corresponding x0 value is reused as the value of x1, which generally does not require configuration.

  • Area.y (yFunc), like area.y0(yFunc), is used to set the lower boundary ordinate reading function

  • Area.y0 (yFunc) sets the lower border ordinate. Its default value is 0, that is, the default lower border on the page is the abscissa. However, if the lower boundary is also a polyline, you need to configure the lower boundary ordinate reading function

    function y() {
  return 0;
}
Copy the code

  • Area.y1 (yFunc) set the upper boundary ordinate reading function,

    D3 by default, when using the line segment generator, the format of the array passed in is [[10, 60], [40, 90], that is, each element is an array composed of two values. The default ordinate reading function of the lower boundary is as follows

    function x(d) {
return d[1];
}
Copy the code

  • Area.defined (definedState) Sets the data integrity check function, which does the same as the corresponding method of line segment generator. If incomplete data exists, it also generates separate areas of multiple blocks.

  • Area. curve(curveInterpolator) Sets a curve interpolator between two points

  • Area.context (parentDOM) is used to set the parent container

  • Area.linex0 () and area.liney0 () are both return bottom boundary generators, typically used to generate the bottom boundary of the area on a page for emphasis display

  • Area.linex1 () returns the generator for the upper boundary

  • Area.liney1 () returns a line generator whose x-coordinate reader returns x0 and y-coordinate reader returns y1

Radial area generator

The radial area generator is similar to the area generator above, except that the cartesian coordinate system has the horizontal coordinate replaced by the Angle (in radians), the vertical coordinate replaced by the length from the center of the circle, the upper boundary corresponds to the outerRadius, and the lower boundary corresponds to the innerRadius.

Method of used3.areaRadial()Creates a line segment generator (hereinafter calledareaRadial).

💡 When the radial area generator is called, the central coordinate of the line segment generated by it defaults to (0, 0), and the transform attribute can be set for its parent container (usually element

) to move to the target position

It also has a variety of methods to set different parameters:

  • Arearadial.angle (angleFunc), similar to area.x(xFunc), sets the Angle reading function, which returns the Angle in radians.

    💡 also sets the inside Angle reading function arearadial.startAngle (angleFunc) and the outside Angle reading function arearadial.endangle (angleFunc) respectively, but generally do not need to be set separately.

  • Arearadial. radius(radiusFunc) similar to area.y(xFunc), sets the inner diameter distance reading function

    💡 Sets the inner diameter distance reading function Arearadial.innerradius (radiusFunc) and outer diameter distance reading function Arearadial.outerradius (radiusFunc) respectively.

  • areaRadial.defined(definedState)

  • Curve (curveInterpolator) Where curveMonotoneX and curveMonotoneY monotonic curve interpolators are not applicable

  • areaRadial.context(parentDOM)

  • AreaRadial. LineStartAngle () and areaRadial lineInnerRadius () returns the inner line generator

  • Arearadial.lineendangle () returns the outside diameter line segment generator

  • AreaRadial. LineOuterRadius () returns a line generator, it is the Angle of the read () function returns the inner Angle startAngle and radial distance outerRadius read () function returns the diameter distance

Curve interpolation generator Curves

The curve interpolation generator cannot directly generate shapes, but defines how the line between two discrete points is generated. D3 provides a variety of different curve interpolation generators corresponding to different line modes, and their functions are generally to simulate smooth curves based on discrete data points.

It is used in conjunction with a line segment generator or area generator, typically as an input parameter to the line segment generator method line.curve() or area generator method area.curve().

const line = d3.line(d= > d.date, d= > d.value)
    .curve(d3.curveCatmullRom.alpha(0.5));
Copy the code

💡 uses the d3.curveLinear curve interpolation generator by default, that is, a line segment is generated directly between two adjacent discrete points.

D3 provides a variety of different curve interpolation generators, which can be configured differently. For details, please refer to the official documentation:

  • d3.curveBasis(context)

  • d3.curveBasisClosed(context)

  • d3.curveBasisOpen(context)

  • d3.curveBasisOpen(context)

  • d3.curveBumpX(context)

  • d3.curveBumpY(context)

  • D3. curveBundle(Context) is commonly used for hierarchical edge bundling, only with line segment generators. The curve interpolates the generator bundle to set the beta coefficient bundle.beta(bataValue), which defaults to 0.85

  • d3.curveCardinal(context)

  • d3.curveCardinalClosed(context)

  • d3.curveCardinalOpen(context)

    Cardinal. tensionValue [1, 0]

  • d3.curveCatmullRom(context)

  • d3.curveCatmullRomClosed(context)

  • d3.curveCatmullRomOpen(context)

    CatmullRom. Alpha (alpha), range [1, 0]

  • d3.curveLinear(context)

  • d3.curveLinearClosed(context)

  • d3.curveMonotoneX(context)

  • d3.curveMonotoneY(context)

  • d3.curveNatural(context)

  • d3.curveStep(context)

  • d3.curveStepAfter(context)

  • d3.curveStepBefore(context)

💡 you can customize the curve interpolation generator using the related interface provided with D3.