折线图按Y轴降序排序

[LUUUAN]

问题描述

使用transform({ type: 'sortX', by: 'y', reverse: true}) 对折线图排序，会导致线条错乱

重现链接

https://codesandbox.io/p/sandbox/nervous-joliot-hg59ty

重现步骤

No response

预期行为

期望能够实现折线图按Y轴降序排序

平台

• 操作系统: [macOS,]
• 网页浏览器: [Google Chrome]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

复现代码如下：原因应该是 sortX 当 x 通道是 ordinal 数据的时候，只对 x scale 的 domain 进行了排序，而不是对数据整体进行排序。

import { Chart } from "@antv/g2";

const chart = new Chart({
  container: "container",
});

// Apply academy theme.
chart.theme({ type: "academy" });

chart
  .line()
  .data({
    type: "fetch",
    value:
      "https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv",
    format: "csv",
  })
  .transform({ type: "groupX", reducer: "sum" })
  .encode("x", "state")
  .encode("y", "population")
  .encode("series", () => "b")
  .transform({ type: "sortX", by: "y" });

chart.render();

但是如下设置也不行 .transform({ type: "sortX", by: "y", ordinal: false });，这个问题可能需要看看？@hustcc

[BQXBQX]

使用 .transform({ type: "sortX", by: "y", ordinal: false }) 时, by 并没有起到作用，sort 是只是简单的根据 channel 进行了排序，而且 domain 也没有进行排序。

代码修改成如下后，正常渲染