How to use the scale of the D3.js starter Series-4

In the previous chapter, we used a very important concept-scale, which explains how to use this section.

1. Maximum value and minimum value

Before introducing the scale, we introduce two functions that appear together with the scale bar, and also appear in the "3rd chapter".

• D3.max ()
• D3.min ()

These two functions are used to find the maximum and minimum values in an array, and if it is a one-dimensional array, use the following method:

var dataset = [[2 ]; var result = D3.max (DataSet);

The variable result holds the maximum value of the array dataset by 52. This is the use of one-dimensional arrays, and the use of two-dimensional arrays is as follows:

var dataset = [[[2 ]; var function  return d[1]; } );

Thus, the returned value is 20, because the comparison is 20, 2, 11 of these three numbers, and the last line of D[1] represents the second value of the specified array.

2. Scale

The next step is to illustrate the use of scale (scales), first of all, to make it clear: the scaling is a function, yes, a function.

Why use scale? Suppose you want to do a data visualization for a car company now, and the monthly car sales are represented by a column chart, assuming 100 sales this month, with 100-pixel-length columns. Next month 500 sales, in 500 pixels, and next month there are 3000 units? It is impossible to use 3,000 pixels and the browser length is not enough. The scale is used at this time.

In scale, given a domain (defined field), a range is given, and the conversion between the values is possible.

The most commonly used scale is a linear function. Its usage is as follows:

var scale = d3.scale.linear (); Scale.domain ([0,20]). Range ([0,100]);     var result = scale (10);

D3.scale.linear () specifies a scale that uses a linear function. The latter two lines specify domain and range for scale, respectively [0, 20] and [0, 100], which, if not specified, are [0, 1] by default. Next call the scale function, passing a parameter 10 to it, the return value is saved in result. What is the value of result, which is 50. It is calculated based on the linear function. Remember that scale is a function.

Domain and range are placed at least two numbers, which can exceed two numbers, but the number must be equal, as shown in the case of 3 numbers:

var scale = d3.scale.linear (); Scale.domain ([0,20,40]). Range ([0,100,150]);     var result = scale (30);

This indicates that there are two linear functions when the output In the value of 30 o'clock, which belongs to the domain (definition field) of the 20–40 range, then the output is 100–150 this range. Here 30 corresponds to a value of 125, so the value of result is 125.

There are some functions in d3.scale.linear (), here are two:

Nice (), changing the function of domain, can automatically turn 0.00000000000001 to the closest to its 0, 9.999999991 to the closest to its 10
Rangeround (), which automatically turns the output to the nearest integer.
Called when the shape is:

Scale.domain ([0.000000001,9.99999999991]). Range ([0,100]). Nice ();

The scale of the most commonly used linear function is described above, and the other is the scale of sqrt, pow,log,quantize,ordinal and so on. Check the official API when you need it.

How to use the scale of the D3.js starter Series-4