fix(orthogonal-demo): 将K上限从N²调整为N³并优化图表坐标轴

- K上限改为N³以扩展多项式增长范围
- 横轴从log轴改为value轴，手动计算log10避免ECharts刻度稀疏问题
- 调整滑杆布局和输入框宽度以适应更大的K值范围
- 修复tooltip中K值还原显示，隐藏右端刻度标签防止截断

Author: treert

web-tools/orthogonal-demo/README.md

@@ -26,7 +26,7 @@ JMLR 14 (2013), arXiv:1306.0256。
 是两者的渐近桥梁**——拖动 K 滑杆可看到黄线逐渐贴合蓝线，直观演示极限定理的收敛。
 细节见 §5。
 
-K 的调节上限取 $N^2$（多项式增长，$\ln K/N = 2\ln N/N$ 全程较小，保证大部分范围
+K 的调节上限取 $N^3$（多项式增长，$\ln K/N = 3\ln N/N$ 全程较小，保证大部分范围
 处于次指数区域）。界面提供两个区域指示：中位数曲线在 $\ln K/N > 0.05$ 的区间铺
 灰色背景；统计栏显示当前 $\ln K/N$ 数值与所属区域
 （< 0.05 次指数区域 / 0.05~0.25 过渡区 / > 0.25 超出定理覆盖范围）。

web-tools/orthogonal-demo/css/style.css

@@ -93,18 +93,36 @@ header h1 {
   white-space: nowrap;
 }
 
-.control input[type="range"] {
+/* K 滑杆组：basis 较大，宽屏下挤不开时与 MC 控制组分行，
+   滑杆随窗口宽度弹性伸长（K 跨 ~12 个数量级，需要精细定位） */
+.control-slider {
+  flex: 1 1 460px;
+}
+
+.control-slider input[type="range"] {
+  flex: 1;
+  width: auto;
+  min-width: 200px;
+}
+
+/* N 只有 64~8192（约 2 个数量级），滑杆固定小宽度即可 */
+#sliderN {
   width: 220px;
 }
 
 .control input[type="number"] {
-  width: 90px;
+  width: 64px;
   padding: 4px 6px;
   border: 1px solid #d0d7de;
   border-radius: 6px;
   font-size: 14px;
 }
 
+/* K 上限 N³（8192³ ≈ 5.5e11，12 位数字），输入框需要更宽 */
+#inputK {
+  width: 130px;
+}
+
 .control-mc {
   flex-wrap: wrap;
 }

web-tools/orthogonal-demo/index.html

@@ -27,7 +27,7 @@ <h1>高维随机向量：最小夹角 / 最大点乘</h1>
       <input id="sliderN" type="range" min="0" max="1000" value="500" />
       <input id="inputN" type="number" min="64" max="8192" step="1" />
     </div>
-    <div class="control">
+    <div class="control control-slider">
       <label for="sliderK">向量数 K</label>
       <input id="sliderK" type="range" min="0" max="1000" value="500" />
       <input id="inputK" type="number" min="2" step="1" />
@@ -77,7 +77,7 @@ <h1>高维随机向量：最小夹角 / 最大点乘</h1>
     <div class="chart-wrap">
       <div id="chart1" class="chart"></div>
       <p class="chart-note">
-        横轴 K（对数刻度，上限 N²），纵轴为 max ρ 的中位数（<strong class="legend-note note-orange">一阶近似 √(2·lnM/N)（双侧 √(2·ln(2M)/N)）
+        横轴 K（对数刻度，上限 N³），纵轴为 max ρ 的中位数（<strong class="legend-note note-orange">一阶近似 √(2·lnM/N)（双侧 √(2·ln(2M)/N)）
         为"期望超标次数=1"的启发式，口径最接近众数，仅作量级对照</strong>）。<strong class="legend-note note-blue">蓝实线 F^M 全 K 适用</strong>，<strong class="legend-note note-yellow">黄虚线 Gumbel 为渐近对照</strong>；竖线为当前 K；
         灰色区域表示 lnK/N &gt; 0.05，理论线开始偏离。
       </p>

web-tools/orthogonal-demo/js/app.js

@@ -12,9 +12,9 @@
   const N_MIN = 64;
   const N_MAX = 8192;
 
-  // K 上限：N²（多项式增长，lnK/N = 2lnN/N 全程保持在次指数区域）
+  // K 上限：N³（多项式增长，lnK/N = 3lnN/N 全程保持在次指数区域）
   function kMax(N) {
-    return N * N;
+    return N * N * N;
   }
   // 渐近区域阈值：lnK/N 小于 SUB_EXP 视为次指数区域（理论线可信），
   // 大于 TRANSITION 视为超出定理覆盖范围
@@ -554,14 +554,24 @@
     // 右侧角度副轴的范围据此换算
     const yMax = 1.05 * T.firstOrderMean(N, kHi, state.twoSided);
 
+    // ECharts log 轴在跨度 ~12 个数量级时只生成个位数刻度，且
+    // customValues / interval / splitNumber 对 log 轴均无效（5.5.0 实测）；
+    // 改用 value 轴 + 数据 x 手动取 log10(K)，刻度间隔 interval:1（每个数量级一个）
+    const lg = Math.log10;
+    const logData = (data) => data.map((p) => [lg(p[0]), p[1]]);
+
     // lnK/N > SUB_EXP 的区间铺浅灰背景：此区域理论线开始偏离
     const kThreshold = Math.exp(SUB_EXP * N);
     const markAreaData =
       kThreshold < kHi
-        ? [[{ xAxis: kThreshold }, { xAxis: kHi }]]
+        ? [[{ xAxis: lg(kThreshold) }, { xAxis: lg(kHi) }]]
         : [];
 
     const mcOv = mcOverlay1(td.ks);
+    // MC 叠加层数据同样是 [K, ρ]，统一做 log10 变换
+    const mcSeries = mcOv.series.map((s) =>
+      Object.assign({}, s, { data: logData(s.data) })
+    );
 
     chart1.setOption(
       {
@@ -571,10 +581,11 @@
         tooltip: {
           trigger: 'axis',
           // 理论与模拟系列共享同一整数 K 网格（theoryData1.ks），
-          // axis 触发下同 K 全部显示；IQR 带是闭合多边形（每个 K 两个点），不进 tip
+          // axis 触发下同 K 全部显示；IQR 带是闭合多边形（每个 K 两个点），不进 tip。
+          // 横轴是 log10(K)，显示时还原为 K（round 吸收浮点尾数）
           formatter: (params) => {
             let html =
-              'K = ' + Math.round(params[0].axisValue).toLocaleString('en-US');
+              'K = ' + Math.round(Math.pow(10, Number(params[0].axisValue))).toLocaleString('en-US');
             for (const p of params) {
               if (p.seriesName.indexOf('IQR') >= 0) continue;
               const v = p.value[1];
@@ -589,17 +600,25 @@
         legend: { bottom: 0 },
         grid: { left: 60, right: 40, top: 30, bottom: 45 },
         xAxis: {
-          type: 'log',
+          // 名义上是对数刻度：坐标值 = log10(K)（见上面 lg/logData 变换）
+          type: 'value',
           name: 'K（向量个数）',
           // 轴名在刻度数值行之下、右对齐收于轴端内侧：
           // nameGap 对 end 放置不生效，用 verticalAlign top + padding 下移；
           // padding 右侧留白与右轴 90° 标签隔开
           nameTextStyle: { align: 'right', verticalAlign: 'top', padding: [24, 0, 0, 0] },
-          min: 2,
-          max: kHi,
-          // K 是整数计数；log 轴末端刻度由 10^log10(N²) 反算，带浮点尾数，需取整
+          // min 取 log 空间整数（K=1）：value 轴 interval 网格从 min 起对齐，
+          // 这样 interval:1 的刻度恰好落在每个数量级上（数据从 K=2 起，
+          // 左端空出 0.3 个数量级可忽略）
+          min: 0,
+          max: lg(kHi),
+          // 每个数量级一个刻度；刻度值为整数 log10(K)，标签还原为 K 的整数码
+          interval: 1,
           axisLabel: {
-            formatter: (v) => Math.round(v).toLocaleString('en-US'),
+            formatter: (v) => Math.round(Math.pow(10, v)).toLocaleString('en-US'),
+            // 右端点（K 上限）标签贴轴缘会被截断，且位数随 N 变化，直接隐藏；
+            // 上限可在控件输入框看到
+            showMaxLabel: false,
           },
         },
         yAxis: [
@@ -626,7 +645,7 @@
             type: 'line',
             showSymbol: false,
             smooth: true,
-            data: td.firstOrder,
+            data: logData(td.firstOrder),
             markArea: {
               silent: true,
               itemStyle: { color: 'rgba(0,0,0,0.045)' },
@@ -645,13 +664,13 @@
             type: 'line',
             showSymbol: false,
             smooth: true,
-            data: td.betaMedian,
+            data: logData(td.betaMedian),
             markLine: {
               silent: true,
               symbol: 'none',
               lineStyle: { type: 'dashed', color: '#999' },
               label: { formatter: 'K = ' + K, position: 'insideEndTop' },
-              data: [{ xAxis: K }],
+              data: [{ xAxis: lg(K) }],
             },
           },
           {
@@ -660,9 +679,9 @@
             showSymbol: false,
             smooth: true,
             lineStyle: { type: 'dashed' },
-            data: td.gumbelMedian,
+            data: logData(td.gumbelMedian),
           },
-        ].concat(mcOv.series),
+        ].concat(mcSeries),
       },
       { notMerge: true }
     );