This is the fourth day of my participation in the August Text Challenge.More challenges in August

D3 implements the bar graph

scale

  • ScaleBand segment scale

    • The segmented scale is similar to the ordinal scale, except that the value of the domain of segmented scale can be a continuous value type whereas the discrete range divides the continuous domain into uniform segments.
    • Segments are commonly used for bar charts containing ordinal or category dimensions.
    • To create a segmented scale:d3.scaleBand().

  • ScaleLinear linear scale

    • The linear scale is created byd3.scaleLiner().
    • The default domain domain is [0, 1], the default range is [0, 1], and the interpolator method is called by defaultinterpolator.
    • The defaultflaseClamp method is presented. It is well supported for continuous quantitative scales.
    • The value y in each range can be represented as a function:y = mx + bWhere x is the value in the corresponding domain.

  • Continuous Scales

  • Continuous scale is a scale type, using continuous quantitative domain mapping continuous range, including: linear scale, exponential scale, logarithmic scale, quantitative identity scale, linear time scale, linear color scale.

  • There are several general methods for continuous scale:

  • ContinuousScale (x) : passes a value in the scope to the scale function and returns the corresponding value in the range. If the given X elextricity is not in the domain and is not enabled, all values returned will be extrextricity of the range. This extrextricity is extruded by mapping values.

  • Continuousscale. invert(y) : Passes a value in the invert method of the scale function, and returns the corresponding value in the domain. Reverse mapping is often useful in interactions where the corresponding data range is calculated based on the mouse position. If y is extrextricity outside the range and is not enabled, a value outside the domain must be extrextricity. This method is only useful if range is a number. NaN is returned if range is not a numeric type.

  • Continuousscale.domain ([numbers]) : Specifies or gets a copy of the current scale domain of a numeric array containing two or more elements. If the elements in a given array are not numeric, they are forced to be numeric. For continuous scales, the domain numeric array usually contains two values, but specifying more than two values generates a scale of quantiles.

  • Continuousscale.range ([values]) : Specifies or obtains a copy of the current scale range. The elements in an array do not have to be numeric, but range must be numeric if invert is used.

  • ContinuousScale. RangeRound (/ values) : instead of the range (), scale of output value will be rounded operation, the result of an integer.

  • Continuousscale.clamp ([Boolean]) : The default is false, which means that when the scale receives a value that is out of the range, it can still get a value by the same calculation method, and this value can be out of the range of the range. When true, any value outside the range is shrunk to the range.

  • ContinuousScale. Interpolate (interpolate) : set the scale of domain interpolation, interpolation method is used to between two adjacent from the range value of the interpolation.

  • Continuousscale. nice([count]) : extends the scope of the domain to a more desirable form. For example, if the domain is [0.500000543, 0.899999931], nice() can be used to change the domain to [0.5, 0.9]. Using the nice() method, the field becomes more tidy, but not rounded.

  • Continuousscale.ticks ([count]) : Returns an approximate array representing the scale domain by default. If count is passed in, the scale will use count as a reference to calculate specific ticks based on the domain. If no count is passed, the default count is 10.

  • ContinuousScale. TickFormat (count [format]) : returns a adjust ticks function of array elements. Ticks elements are also called ticks. Note that the value of the count parameter should be the same as that of the ticks parameter. The optional format specifier allows developers to customize the format of the ticks array elements and automatically set the precision of the format, such as formatting numbers to percentages.

  • Continuousscale.copy () : Returns a copy of the current scale. There is no interaction between the returned copy and the current scale.

Histogram drawing ideas and processes

  • Implementation of coordinate axes

    • The correspondence of linear scale is continuous, while that of ordinal scale is discrete.
    • It can be concluded that ordinal scale should be used for x axis and linear scale should be used for Y axis by analyzing the significance of histogram display.
    • d3.scale.ordinal()An ordinal scale is created.
    • whileordinal.domain()The scope of the scale is set.
    • ordinal.rangRoundBands()The range is set.
    • In the same way,d3.scale.linear()A linear scale is created.
    • linear.domain()Defines the domain, linear.range() defines the range.
    • And then we used3.svg.axis()Create two axes, apply scale to them, and useaxis.orient()Sets the direction of the scale for the coordinate axes.
    • Finally, add an SVG element, using call() to associate the defined axes with the SVG element.

  • Column implementation

    • You can draw in SVG using the rect element.
    • Select all bar elements under main (this is an empty set)
    • Dataset. Y to this collection, using the datasetenter()Compares the number of bound array elements with the number of SVG elements in the collection, andappend()When used together, it will automatically complete until the number of both sides is equal.
    • Each append corresponds to an array element in dataset. Y. Use the scale function created earlier to compute the value and assign the x and Y attributes to the holding element.