D3.js Series--scale

The scale is a very important concept in D3. It is not a good way to use the size of a numeric value to represent pixels directly when drawing a drawing, and this chapter is about solving this problem.

first, why need scale

The previous chapter produced a column chart with an array that, when plotted, directly assigns a value of 250 to the width of the rectangle, that is, the width of the rectangle is 250 pixels. This approach is very limited if the values are too large or too small, for example:

var 2.5 2.1 1.7 1.3 0.9  ]; var 2500 2100 1700 1300  ];

For the above two arrays, it is never possible to use 2.5 pixels to represent the width of the rectangle, so it is not visible at all, and it is impossible to use 2,500 pixels to represent the width of the rectangle, because the canvas is not that long. So, we need a computational relationship that can: map The value of one region to another, and the size of the relationship is the same . this is the scale.

Ii. What are the scales

Scale, much like a function in mathematics. For example, for a unary two-time function, there are X and y two unknowns, and when the value of X is determined, the value of Y is determined. In mathematics, the range of x is called the definition field , and the range of y is called the domain value.

The scale in the D3 also has a defined field and a range, respectively, called Domain and ranges. The developer needs to specify the scope of domain and range so that a computational relationship can be obtained.

D3 offers a wide range of scales, the two most commonly used are described below.

1. Linear scale

Linear scale, which can map a continuous interval to another interval. To solve the problem of column chart width, a linear scale is required.

Assuming the following array, the existing requirements are as follows: Map the smallest value in the dataset to 0, and the maximum value to 300. The code is as follows:

        varDataSet = [1.2,2.3,0.9,1.5,3.3]; varMin =d3.min (DataSet); varMax =D3.max (DataSet); varLinear =d3.scale.linear (). Domain ([min, Max])//Note: domain ()/range () is in the form of arrays . . Range ([ 0,]); Linear (0.9);//returns 0Linear2.3);//back to 175Linear3.3);//return

whered3.scale.linear () returns a linear scale. domain () and range () set the definition fields and value ranges for the scale bar, respectively . There are also two functions used here, which often appear with the scale bar:

D3.max (), and D3.min (): These two functions are capable of finding the maximum and minimum values of an array, which is provided by D3.

According to the above code: the definition domain of the scale is: [0.9, 3.3], the range of the scale is: [0, 300]

Therefore, when you enter 0.9, 0 is returned, and when you enter 3.3, 300 is returned. What happens when I enter 2.3? Returns 175, which is calculated according to the rules of the linear function .

One thing you should remember:The return value of D3.scale.linear () is used as a function. Therefore, there is such a usage: linear (0.9).

2. Ordinal scale

Sometimes, defining fields and ranges is not necessarily contiguous. For example, there are two arrays:

 var  index = [ 0 , 1 , 2 , 3 , 4  ];  var  color = [ " red   ", "  blue   ", "  green   ", "  yellow   ", "  black  ";  

We want 0 for the color red,1 corresponding to blue, and so on. However, these values are discrete, the linear scale is not suitable, and the ordinal scale is required.

var ordinal = d3.scale.ordinal ()        . Domain (index)        . Range (color); ordinal (0//  back to Redordinal(2// return Greenordinal (4// return Black

　　ordinal scale: d3.scale.ordinal (); usage is similar to linear scale.

3. Application:

"Utf-8"> <title> Simple Rectangle </title> "Http://d3js.org/d3.v3.min.js"charset="Utf-8"></script> <script>varwidth = -;//width of canvas    varHeight = -;//the height of the canvas     varSVG = D3.Select("Body")//Select the BODY element in the document. Append ("svg")//add an SVG element. attr ("width", width)//Set Width. attr ("Height", height);//Set Height    varDataSet = [2.5,2.1,1.8,1.3,0.9];//data (representing the width of the rectangle)var linear = d3.scale.linear (). Domain ([0,d3.max (DataSet)]). Range ([0,250]); varRectheight = -;//the pixel height of each rectangle (including white space)Svg.selectall ("rect"). Data (DataSet). Enter (). Append ("rect"). attr ("x", -). attr ("y", Function (d,i) {returnIRectheight; }). attr ("width", function (d) {return linear (d); Apply bar here}). attr ("Height", rectheight-2). attr ("Fill","Steelblue"); </script> </body> 

It is mainly the application of the two pieces of red. As a result, all values are calculated in terms of the relationship of the same linear scale to the width, so the size relationship between the values is constant.

D3.js Series--scale