D3.js | d3.scaleBand()函数

D3.js 中的d3.scaleBand()函数用于构造一个新的带刻度，其域指定为值数组，范围指定为带的最小和最大范围。此函数将范围分成 n 个带，其中 n 是域数组中的值的数量。

句法：

d3.scaleBand().domain(array of values).range(array of values);

参数：此函数不接受任何参数。

返回值：此函数返回域值的相应范围。

下面的程序说明了 D3.js 中的d3.scaleBand()函数：

示例 1：

  

    
        D3.js | d3.scaleBand() Function
    
      
    
    

  

    
          
        // Calling the scaleBand() function
        var A = d3.scaleBand()
            .domain(['January', 'February', 'March', 'April', 'May'])
            .range([10, 50]);
          
        // Getting the corresponding range for
        // the domain value
        console.log(A('January'));
        console.log(A('February'));
        console.log(A('March'));
        console.log(A('April'));
        console.log(A('May'));
    

  

输出：

10
18
26
34
42

示例 2：

  

    
        D3.js | d3.scaleBand() Function
    
      
    
    

  

    
          
        // Calling the scaleBand() function
        var A = d3.scaleBand()
            .domain(['January', 'February', 'March', 'April', 'May'])
            .range([1, 2]);
           
        // Getting the corresponding range for
        // the domain value
        console.log(A('January'));
        console.log(A('February'));
        console.log(A('March'));
        console.log(A('April'));
        console.log(A('May'));
    

  

输出：

1
1.2
1.4
1.6
1.8

参考： https://devdocs.io/d3~5/d3-scale#scaleBand