【v5】双轴的刻度线是否支持对齐

[Deathsteps]

我发现之前就有类似的对齐问题 #3459，不知道现在是否有解决方案

[hustcc]

还是没有什么好的解决方案。毕竟还是两个 min max 的 tick 计算。

[Deathsteps]

非常有用的一个 feature，隔壁 echarts 已经支持了，希望官方能考虑考虑。
我理解实际业务使用时，数据侧不是泛化的。可以给一个不稳定的版本，让用户试用反馈。

[pearmini]

我看了一下 ECharts 的效果，似乎并不是简单的 ticks 对其这么简单，还需要去修改数据的定义域。这样会修改不同指标之间的相对关系，我不确定这样是否好。但其实这些指标本身就没有关系，所以其实也无伤大雅？

[Deathsteps]

我想了解一下，目前 linear 的 tickCount 或 ticks 是怎么决定的。
我的场景里，不用考虑其它类型 scale 的情况。我想通过设定同样的 tickCount，调和 domain 的 min 和 max 来实现对齐效果。但目前，我不清楚默认的 tickCount 是怎么算出来的（感觉有个算法在给定数据集的情况下推导出合理的 tickCount)。
我会自定义 tickMethod。

[pearmini]

默认的 tick 算法可以看这里：https://github.com/antvis/scale/blob/master/src/tick-methods/d3-ticks.ts ，目前推荐自定义 tickMethod 来实现。

[Deathsteps]

我发现有个坑爹的问题，现在的 tickMethod 是无法访问到 data 的。导致本来调用 chart.changeData 的地方，因为我要实现 tick 对齐，要改成 chat.options 或重新绘图的方式。看下有没有什么 workaround 😭 🙏

[pearmini]

可以先把新的 domain，tickCount 这些计算好了，再把配置交给 G2 去渲染。

[Deathsteps]

意思是，可以在调用 changeData 之前，重新调用 scale 修改 domain 和 tickCount 是吧。

[Deathsteps]

我发现，虽然我可以在 G2 渲染前计算好 domain，但对于像堆叠柱形图这种 应用了 transform 的情况，预计算的 domain 还是没用。还是要官方出解决方案来 cover 这些场景。

[Deathsteps]

我写了一个 alignTicks 的方案。
我发现最后还是要改 domain，tickMethod 直接使用默认的线性 d3Ticks 就可以了。个人感觉，两轴的 tickCount 和 range 相同的情况下，只能对齐两轴的 domain。
最后还有一个问题，就是上条 comment 所说的那样，changeData 的时候需要根据新数据重新计算对齐的 domain，目前貌似只能 重新 new Chart 。

function getRangeAndFactor(start: number, stop: number) {
  const maxNum = Math.max(Math.abs(start), Math.abs(stop));
  const factor = Math.floor(Math.log(maxNum) / Math.LN10);
  const range = [start, stop];
  range[0] /= 10 ** factor;
  range[1] /= 10 ** factor;
  return {
    range,
    factor: 10 ** factor,
  };
}

function calcAlignTickOptions(tickOpts: { min: number; max: number; tickCount: number }[]) {
  // 1. 把所有轴的 tick [min, max] 映射到 [-10, 10] 区间
  const rangeFactors = tickOpts.map((x) => getRangeAndFactor(x.min, x.max));
  // 2. 计算共享的 range
  const sharedRange = rangeFactors.reduce(
    (ret, x) => [Math.min(x.range[0], ret[0]), Math.max(x.range[1], ret[1])],
    [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY],
  );
  // 3. 使用 factor 推算各个轴各自的 domain
  const domains = rangeFactors.map((x) => [sharedRange[0] * x.factor, sharedRange[1] * x.factor]);
  // 4. 取最大的 tickCount 作为共享的
  const tickCount = tickOpts.reduce(
    (ret, x) => Math.max(x.tickCount, ret),
    Number.NEGATIVE_INFINITY,
  );
  // 5. 返回新的 domain 和 tickCount
  return domains.map((_, i) => ({
    domain: domains[i],
    tickCount,
    nice: false,
  }));
}