自定义slider在x不为date类型时，拖动轴 scale.invert返回NaN。

[ChristmasFox]

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

const chart = new Chart({
  container: 'container',
  theme: 'classic',
});

chart.options({
  type: 'line',
  theme: 'classic',
  data: {
    type: "fetch",
    value:
      "https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv",
    format: "csv",
  },
  encode: { x: "letter", y: "frequency" },
});

chart.render().then(sliderX);

function sliderX(chart) {
  // 创建并且挂载 range
  const container = chart.getContainer();
  const range = document.createElement('input');
  container.append(range);

  // 根据 coordinate 设置 range 的宽度等属性
  const coordinate = chart.getCoordinate();
  const { paddingLeft, width } = coordinate.getOptions();
  range.type = 'range';
  range.min = 0;
  range.max = width;
  range.value = width;
  range.style.display = 'block';
  range.style.width = width + 'px';
  range.style.marginLeft = paddingLeft + 'px';

  // 监听 change 事件，通过 scale 获得筛选得到的 domain
  // 更新 domain 并且渲染
  const scale = chart.getScaleByChannel('x');
  const options = chart.options();
  range.onchange = (event) => {
    const value = event.target.value;
    const range = [0, value / width];
    console.log(range)
    const domain = range.map((d) => scale.invert(d));
    console.log(domain)
    chart.options({
      ...options,
      scale: { x: { domain } },
    });
    chart.render();
  };
}

[pearmini]

这个例子里面只是展现了连续数据的处理情况，离散的情况需要额外处理：可以参考这里。

[ChristmasFox]

处理好了 感谢!