[D3.js] SVG-Axes (coordinate axis)

[D3.js] SVG-Axes (coordinate axis)
Axis D3 Axis components are designed for D3 quantitative, time, and ordinal scales. # D3.svg. axis () create a default axis. # The aixs (selection) axis applies to selection or transition. The selector must contain an svg or g element. For example, d3.select ("body "). append ("svg "). attr ("class", "axis "). attr ("width", 1440 ). attr ("height", 30 ). append ("g "). attr ("transform", "translate (0, 30 )"). call (axis); # axis. scale ([scale]) if the scale measure is specified, set the corresponding measurement and return the axis. If no value is specified, the current measurement is returned. The default value is linear measurement. # Axis. orient ([orientation]) (Direction) if the orientation direction is specified, set the corresponding direction and return. If no value is specified, the default direction "bottom" is returned ". Supported methods include: "top"-the horizontal scale is located above the axis "bottom"-the horizontal scale is located below the axis "left"-the vertical scale is located at the left of the axis "right"-the vertical scale if the specified direction is not one of the four supported parameters, the default value is automatically restored. Changing the direction can only change the positions of labels related to the scale and Axis Path, but cannot change the positions of the axis itself. To change the axis position for the current region, you can specify the transform attribute of the corresponding g element. # Axis. ticks ([arguments...]) (scale) if the arguments parameter is specified, these parameters are stored and used when the scale is generated and returned. These parameters will also be passed to scale. ticks to generate the scale value (unless the scale value is explicitly specified through axis. tickValues ). These parameters are also passed to the scale tickFormat method to generate the default scale format. If no parameter is specified, the default scale parameter is returned. The default value is [10]. Appropriate parameters depend on relevant measurements: For a linear measure, you can look like axis. ticks (20) is used to specify the number of scales. For logarithm measurements, you should specify the number and the scale format. For time measurements, such as axis. ticks (d3.time. minutes, 15) it is more appropriate to have a time interval. # Axis. tickValues ([values]) (scale value) if the values array is specified, these values will be used for scale labeling, rather than automatically generated scale values using measurements. If values is empty, all the previously set scale values are cleared and restored to the original default scale value. If no scale value is specified, the current set scale value is returned. The default value is null. For example, specify the scale value to generate a scale: var xAxis = d3.svg. axis (). scale (x ). tickValues ([1, 2, 3, 5, 8, 13, 21]); the priority of the specified scale value is higher than that of axis. parameters passed in by ticks. However, all scale Parameters are passed into the scale tickFormat method even if the scale format is not set; therefore, it is valid for axis. ticks and axis. tickValues. # Axis. tickSize ([inner, outer]) (Dial length) if the length of the internal and external dial is specified, it is set. If no value is specified, the length of the current internal dial is returned, the default value is 6 (6px ). # Axis. innerTickSize ([size]) (length of the internal dial line) if the size is specified, set the length of the internal dial line according to the size and return the axis. If no value is specified, the internal dial size of the current default value of 6 is returned. The internal dial line controls the length of the dial line and calculates the offset from the position of the axis itself. # Axis. outerTickSize ([size]) (length of the outer dial) if the size is specified, set the length of the outer dial according to the size and return the axis. If this parameter is not specified, the system returns the size of the lateral dial of the current default value of 6. The outer dial line controls the length of the dial line at both ends of the scale value field. The offset is calculated from the position of the axis. However, the "outer dial" is not actually a part of the value line, but a part of the value line path. Their positions are determined by the range of values for relevant measurements. Therefore, the outer dial may be overlapped by the first or last internal dial. If the value is 0, the two ends of the value range path are not allowed and a straight line cannot be drawn. # Axis. tickPadding ([padding]) (fill between the dial line and the scale annotation) if the fill is specified, it is set and the axis is returned; otherwise, the current fill size is returned, the default value is 3 (3px ). # Axis. tickFormat ([format]) (scale label format) if the format is specified, set the format according to the specified method and return the axis. If no format is specified, the default value is null. The empty format also means that scale will use the default format when calling scale. tickFormat. In this case, the parameter specified in ticks will be passed to scale. tickFormat. D3.format is used to create and format data. For example, axis. tickFormat (d3.format (",. 0f") is used to separate integers with commas. First, define the format: var commasFormatter = d3.format (",. 0f "), so that you can call it on your data like a method. For example, add the currency unit before the integer in the comma group :. tickFormat (function (d) {return "$" + commasFormatter (d );}). Note: For log measurements, the number of scales cannot be customized. However, the number of scale labels can be defined by ticks. Similarly, the scale format of the log metric is usually specified by ticks instead of tickFormat to retain the default behavior.