如何在对数刻度（log-scale）与线性刻度间实现插值及外推？

核心参数化公式 #

我们可以使用广义幂函数转换实现线性与对数刻度间的连续过渡，公式如下：

对于正数值 $x$，定义参数化转换函数：
$$
f_\alpha(x) = \frac{x^\alpha - 1}{\alpha}
$$
其中 $\alpha \in \mathbb{R}$ 是控制过渡的核心参数：

• 当 $\alpha = 1$ 时，$f_1(x) = x - 1$，对应线性刻度（仅平移，不改变刻度分布特性）；
• 当 $\alpha \to 0$ 时，通过泰勒展开可得 $\lim_{\alpha \to 0} f_\alpha(x) = \ln x$，对应自然对数刻度；
• 当 $\alpha < 0$ 时，可实现对数刻度的外推（反向过渡，刻度分布比普通对数更陡峭）。

若要将输入范围 $[x_{\text{min}}, x_{\text{max}}]$ 映射到可视化输出范围 $[y_{\text{min}}, y_{\text{max}}]$，完整归一化转换步骤为：

1. 应用参数化转换：计算输入值的转换结果 $t = f_\alpha(x)$
2. 归一化到输出区间：$y = y_{\text{min}} + (y_{\text{max}} - y_{\text{min}}) \cdot \frac{t - f_\alpha(x_{\text{min}})}{f_\alpha(x_{\text{max}}) - f_\alpha(x_{\text{min}})}$

可运行JavaScript可视化示例 #

以下代码使用HTML5 Canvas实现了可交互的刻度演示，拖动滑块调整参数 $\alpha$ 即可实时查看刻度过渡效果：

<!DOCTYPE html>
<html>
<body>
  <div>
    <label>过渡参数 α: </label>
    <input type="range" id="alphaSlider" min="-1" max="1" step="0.05" value="0">
    <span id="alphaValue">0</span>
  </div>
  <canvas id="scaleCanvas" width="800" height="200"></canvas>

  <script>
    const canvas = document.getElementById('scaleCanvas');
    const ctx = canvas.getContext('2d');
    const slider = document.getElementById('alphaSlider');
    const valueDisplay = document.getElementById('alphaValue');

    // 定义输入范围与可视化基准
    const xMin = 1;
    const xMax = 1000;
    const yBase = 150;
    const tickLength = 20;

    // 广义转换函数，处理α趋近于0的极限情况
    function f(alpha, x) {
      if (Math.abs(alpha) < 1e-6) return Math.log(x);
      return (Math.pow(x, alpha) - 1) / alpha;
    }

    // 将输入值映射到画布X坐标
    function mapX(alpha, x) {
      const fMin = f(alpha, xMin);
      const fMax = f(alpha, xMax);
      const t = (f(alpha, x) - fMin) / (fMax - fMin);
      return 50 + t * (canvas.width - 100);
    }

    // 绘制刻度线与标签
    function drawScale(alpha) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // 绘制基线
      ctx.beginPath();
      ctx.moveTo(50, yBase);
      ctx.lineTo(canvas.width - 50, yBase);
      ctx.stroke();

      // 绘制主刻度（1、10、100、1000）
      const mainTicks = [1, 10, 100, 1000];
      mainTicks.forEach(x => {
        const canvasX = mapX(alpha, x);
        ctx.beginPath();
        ctx.moveTo(canvasX, yBase - tickLength);
        ctx.lineTo(canvasX, yBase + tickLength);
        ctx.stroke();
        ctx.textAlign = 'center';
        ctx.fillText(x, canvasX, yBase + tickLength + 15);
      });

      // 绘制次刻度（2-9、20-90等）
      for (let i = 0; i < 3; i++) {
        const base = Math.pow(10, i);
        for (let j = 2; j <=9; j++) {
          const x = base * j;
          const canvasX = mapX(alpha, x);
          ctx.beginPath();
          ctx.moveTo(canvasX, yBase - tickLength/2);
          ctx.lineTo(canvasX, yBase + tickLength/2);
          ctx.stroke();
        }
      }
    }

    // 滑块交互监听
    slider.addEventListener('input', () => {
      const alpha = parseFloat(slider.value);
      valueDisplay.textContent = alpha.toFixed(2);
      drawScale(alpha);
    });

    // 初始绘制
    drawScale(0);
  </script>
</body>
</html>

方案合理性说明 #

• 严格匹配极限情况：α=1时完全对应线性刻度，α趋近于0时完全对应对数刻度，无临时拼凑逻辑；
• 连续可控过渡：α在[-1,1]区间内连续变化时，刻度分布平滑过渡，无突变；
• 支持外推场景：α<0时可实现比对数刻度更极端的分布，适配特殊数据可视化需求；
• 计算高效：仅涉及幂函数与对数运算，前端环境可快速计算，支持实时交互。

内容的提问来源于stack exchange，提问作者root