D3:Ordinal Scales & Band Scales

Date: 2020-10-12
Author: 18th WRZ
Tags: Data Visualization

1. Ordinal Scales

The input domain and output domain of the ordinal scale are both discrete. It can map the value of the input domain to the output domain according to the order of the data in the data set. First, let's define an ordinal scale

 var scale=d3.scale.Ordinal()
                   .domain(d3.range(3))
                   .range(["a","b","c"]);
 console.log(scale(0));

Then the problem is coming. At this time, after opening the browser console and
Insert picture description here
consulting the official documents, I found that the definition of ordinal scale from D3 v4 no longer supports the above writing. The correct wording should be

 var scale=d3.scaleOrdinal()
              .domain(d3.range(3))
              .range(["a","b","c"]);
 console.log(scale(0));

After execution, you can get the following results in the console
Insert picture description here

ordinal.domain()
If domain is specified, set the input domain to the specified array. The order of the elements in the input field corresponds to the order of the elements in the output field. The input field is stored internally in the form of a string-to-index mapping; the index value is used for output retrieval. Therefore, the value of the ordinal scale must be a string or a type that can be forced to a string, and it must be unique.

  var scale=d3.scaleOrdinal()
               .domain([1,1,2])
               .range(["a","b","c"]);
  console.log(scale(1));

At this time, the value displayed on the console is still a, but 1 can also be mapped to b, but xScale(1) cannot distinguish which value in the input field this 1 refers to. Therefore, the value in the input field must be unique.
It should also be noted that the rangeBands() and rangeRoundBands() methods are no longer supported in the ordinal scale in D3 V4. In order to achieve the original effect, another scale is needed

2. Band Scales

The input domain of the segmented scale is still discrete, but the output domain can be continuous. The output of the segment scale is still discrete, and the discrete output value is divided into uniform segments by dividing the continuous range.
Insert picture description here
Now let's define a segmented scale

            var scale=d3.scaleBand()
                        .domain([0,1,2,3])
                        .range([0,100]);
            console.log(scale(1));
            console.log(scale(2));
            console.log(scale(3));

The results of the console at this time are as follows:
Insert picture description here

The band.rangeRound() method
divides the continuous range into uniform segments, and the start and end points of each segment are integers.
The
value range of band.paddingInner() and band.paddingOuter() is [0,1], indicating the interval ratio