D3.js（二）：比例尺、坐标轴、带有坐标轴的柱状图

电玩女神 2024-04-06 10:04 71阅读 0赞

### 比例尺 ###

> 将`一个区间`的数据对应到`另一个区间`

<table> 
 <thead> 
  <tr> 
   <th>比例尺</th> 
   <th>描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>定量比例尺</td> 
   <td>定义域是连续的</td> 
   <td>如：<code>[0, 1]</code>对应到<code>[0, 300]</code>,那么<code>0.5</code>为<code>150</code></td> 
  </tr> 
  <tr> 
   <td>序数比例尺</td> 
   <td>定义域不是连续的</td> 
   <td>如：<code>[0, 1, 2]</code>对应到<code>['red', 'green', 'blue']</code>,那么<code>2</code>为<code>blue</code></td> 
  </tr> 
 </tbody> 
</table>

### 定量比例尺 ###

#### 线性比例尺 ####

// y = x/5
    let linear = d3.scaleLinear() // 创建一个线性比例尺
        .domain([0, 5]) // 设定或获取定义域 x
        .range([0, 1]); // 设定或获取值域 y
    
    console.log(linear(50)); // 10
    console.log(linear(100)); // 20
    console.log(linear(500)); // 100
    console.log(linear(600)); // 120
    
    // 输入一个值域的值，返回定义域内的值
    console.log(linear.invert(0.5)); // 2.5
    console.log(linear.invert(1)); // 5
    console.log(linear.invert(2)); // 10
    
    // 设定或获取定义域内具有代表性的值的数目,用于选取坐标刻度
    console.log(linear.ticks(3)); // [0, 2, 4]
    console.log(linear.ticks(8)); // [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]
    console.log(linear.ticks(10)); // [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]
    
    // 设置定义域内具有代表性的值的表示形式
    let tick = linear.tickFormat(3, '%');
    console.log(tick(0)); // 0%
    console.log(tick(2)); // 200%
    console.log(tick(3)); // 300%
    console.log(tick(10)); // 1000%

#### 指数和对数比例尺 ####

let pow1 = d3.scalePow().exponent(3);
    console.log(pow1(2)); // 8
    console.log(pow1(3)); // 27
    
    /**
     * 等价于
     * let pow2 = d3.scaleLinear()
     *      .domain([0, Math.pow(3, 3)])
     *      .range([0, 90]);
     * console.log(pow2(Math.pow(2, 3))); // 26.666666666666664
     * console.log(pow2(Math.pow(3, 3))); // 90
     */
    let pow2 = d3.scalePow().exponent(3)
        .domain([0, 3])
        .range([0, 90]);
    console.log(pow2(2)); // 26.666666666666664
    console.log(pow2(3)); // 90

#### 量子和分位比例尺 ####

![在这里插入图片描述][9b8941137f344413a7aeda2e6212bab2.png_pic_center]

let quantize = d3.scaleQuantize()
        .domain([0, 10])
        .range(['red', 'green', 'blue', 'yellow', 'black']);
    
    console.log(quantize(-1)); // red
    console.log(quantize(1)); // red
    console.log(quantize(2)); // green
    console.log(quantize(3)); // green
    console.log(quantize(4)); // blue
    console.log(quantize(11)); // black
    
    d3.select('body')
        .append('svg')
        .selectAll('circle')
        .data([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
        .enter()
        .append('circle')
        .attr('cx', (d, i) => i * 20 + 50)
        .attr('cy', 100)
        .attr('r', 20)
        .attr('fill', d => quantize(d));

#### 阈值比例尺 ####

let threshold = d3.scaleThreshold()
        .domain([10, 20, 30])
        .range(['red', 'green', 'blue', 'yellow', 'black']);
    
    /**
     * -无穷 ~ 9        red
     * 10 ~ 19          green
     * 20 ~ 29          blue
     * 30 ~ +无穷       yellow
     */
    for (let i = -100; i < 100; i++) {
        
        console.log(i, threshold(i));
    }

### 序数比例尺 ###

let ordinal = d3.scaleOrdinal()
        .domain([1, 5, 2, 3, 10])
        .range(['red', 'green', 'blue', 'yellow', 'black']);
    console.log(ordinal(1)); // red
    console.log(ordinal(5)); // green
    console.log(ordinal(2)); // blue
    console.log(ordinal(3)); // yellow
    console.log(ordinal(10)); // black

// ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']
    console.log(d3.schemeCategory10);

### 带有坐标轴的柱状图 ###

![在这里插入图片描述][931a2cfd667549f5955ec2c77dccafd0.png_pic_center]

[9b8941137f344413a7aeda2e6212bab2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/405375716ee54203b82482df6e8f7146.png
[931a2cfd667549f5955ec2c77dccafd0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b61db06235944a0dac428ec7b6a7b0e2.png