[4] scale used in d3.js

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

A very important concept was used in the previous section-scale ( This does not know what to translate into, let's call it proportions ). This section will focus on how it is used.

Before introducing scale, let's introduce two functions that appear together with the scale, and also appear in the previous section.

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

They 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 = [];var, 2, and one-to-one 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], [all], [];var],                result = D3.max (DataSet, function (d) {   return d[ 0]; } );

As a result, the returned value is 90, because the comparison is 30,52,90 three numbers, and the last line of D[0] is the first value that specifies each of the arrays.
The next step in the usage of scale is to be clear:function, yes, it is.function。 Why use scale? Suppose you're going to do a data visualization for a car company now, and you're going to use a column chart for its monthly car sales, assuming that you're selling 100 of 100-pixel-long columns in the month. Next month 500 sales, you use 500 pixels, and then next month and 3000 units? I'm afraid you can't use 3,000 pixels.    The scale is used at this time. Scale is used for a givendomain (definition field), given arange (domain), the ability to automatically convert between values. 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);

Specify the scale to use the linear function by D3.scale.linear (). The next two lines specify domain and range for scale, respectively [0, 20] and [0, 100], and if not specified, they are [0, 1] by default. Next call the scale function, pass a parameter 10 it, the return value is saved in result. What is the value of result, which is 10. It is calculated based on the linear function.Be sure to 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 means that there are two linear functions, and when the input value is 30 o'clock, which belongs to the 20-40 range of domain (defined field), 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 several methods 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. When you need it, you can go to the D3js.org query API.