折线图设置base不成功 #4867

具体的代码

期望的效果是怎样的？设置 base 应该不会去影响映射结果，只是影响 tick 的生成。

希望坐标轴是对数显示，但是不生效

是觉得有一些多余的 tick 吗？

是觉得有一些多余的 tick 吗？

是的

是觉得有一些多余的 tick 吗？

是的，好像怎么设置都不行

可以设置 tickCount 试一下：

chart.interval().axis('y', { tickCount: 5 })

可以设置 tickCount 试一下：

chart.interval().axis('y', { tickCount: 5 })

加了好像报错

可以设置 tickCount 试一下：

chart.interval().axis('y', { tickCount: 5 })

能不能加个好友，感谢

@Yhui11 这里有我的钉钉

<img src="https://user-images.githubusercontent.com/49330279/232405078-832e0edf-f656-4853-85fd-011aa6084745.png" width=300 />

可以设置 tickCount 试一下：

chart.interval().axis('y', { tickCount: 5 })

加了好像报错

这里不是说直接加 chart.interval().axis('y', { tickCount: 5 })，而是举个例子。需要 chart.point() 后面添加 .axis('y', { tickCount: 5 })

5.0X版本的G2里面的指数回归线图坐标怎么设置成对数坐标，用log没有，log好像只针对4和4前面的版本

对数坐标是指？

x轴和y轴以10的底数递增，这个是echarts的示例

/**
 * A recreation of this demo: https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression
 */
import { Chart } from '@antv/g2';
import { regressionExp } from 'd3-regression';

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

chart.data({
  type: 'fetch',
  value: 'https://assets.antv.antgroup.com/g2/exponential-regression.json',
});

chart
  .point()
  .encode('x', (d) => d[0])
  .encode('y', (d) => d[1])
  .encode('shape', 'point')
  .scale('x', { domain: [0, 18] })
  .scale('y', { domain: [0.1, 100000], type: 'log' })
  .style('fillOpacity', 0.75)
  .axis('y', { tickCount: 5 }); // 指定 tickCount

chart
  .line()
  .data({
    transform: [
      {
        type: 'custom',
        callback: regressionExp(),
      },
    ],
  })
  .encode('x', (d) => d[0])
  .encode('y', (d) => d[1])
  .encode('shape', 'smooth')
  .style('stroke', '#30BF78')
  .style('lineWidth', 2)
  .label({
    text: 'y = 3477.32e^(0.18x)\nThe coefficient of determination, or R^2, is 0.998',
    selector: 'last',
    style: {
      textAlign: 'end',
    },
  });

chart.render();

/**
 * A recreation of this demo: https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression
 */
import { Chart } from '@antv/g2';
import { regressionExp } from 'd3-regression';

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

chart.data({
  type: 'fetch',
  value: 'https://assets.antv.antgroup.com/g2/exponential-regression.json',
});

chart
  .point()
  .encode('x', (d) => d[0])
  .encode('y', (d) => d[1])
  .encode('shape', 'point')
  .scale('x', { domain: [0, 18] })
  .scale('y', { domain: [0.1, 100000], type: 'log' })
  .style('fillOpacity', 0.75)
  .axis('y', { tickCount: 5 }); // 指定 tickCount

chart
  .line()
  .data({
    transform: [
      {
        type: 'custom',
        callback: regressionExp(),
      },
    ],
  })
  .encode('x', (d) => d[0])
  .encode('y', (d) => d[1])
  .encode('shape', 'smooth')
  .style('stroke', '#30BF78')
  .style('lineWidth', 2)
  .label({
    text: 'y = 3477.32e^(0.18x)\nThe coefficient of determination, or R^2, is 0.998',
    selector: 'last',
    style: {
      textAlign: 'end',
    },
  });

chart.render();

用自己的数据测试出不来，X轴和Y轴都要是对数显示。

import { Chart } from '@antv/g2'; import { regressionExp } from 'd3-regression';

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

chart.data({ type: 'inline', value: [ [5, 0.09459459], [10, 0.22972973], [15, 0.36486486], [20, 0.5], [25, 0.63513514], [30, 0.77027027], [35, 0.90540541] ], });

chart .point() .encode('x', (d) => d[0]) .encode('y', (d) => d[1]) .encode('shape', 'point') .scale('x', { domain: [5, 100] }) .scale('y', { domain: [0.1, 1], type: 'log' }) .style('fillOpacity', 0.75) .axis('y', { tickCount: 5 }) // 指定 tickCount

chart .line() .data({ transform: [ { type: 'custom', callback: regressionExp(), }, ], }) .encode('x', (d) => d[0]) .encode('y', (d) => d[1]) .encode('shape', 'smooth') .style('stroke', '#30BF78') .style('lineWidth', 2) .label({ text: 'y = 3477.32e^(0.18x)\nThe coefficient of determination, or R^2, is 0.998', selector: 'last', style: { textAlign: 'end', }, });

chart.render();

代码在这里

使用 tickMethod 自定义 tick。

import { Chart } from '@antv/g2';
import { regressionExp } from 'd3-regression';

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

chart.data({
  type: 'inline',
  value: [
    [5, 0.09459459],
    [10, 0.22972973],
    [15, 0.36486486],
    [20, 0.5],
    [25, 0.63513514],
    [30, 0.77027027],
    [35, 0.90540541],
  ],
});

chart
  .point()
  .encode('x', (d) => d[0])
  .encode('y', (d) => d[1])
  .encode('shape', 'point')
  .scale('x', { domain: [1, 100], type: 'log' })
  .scale('y', { domain: [0.001, 1], type: 'log' })
  .style('fillOpacity', 0.75)
  .axis('y', { tickMethod: () => [0.001, 0.01, 0.1, 1] }) 
  .axis('x', {tickMethod: () => [1, 10, 100]})

chart
  .line()
  .data({
    transform: [
      {
        type: 'custom',
        callback: regressionExp(),
      },
    ],
  })
  .encode('x', (d) => d[0])
  .encode('y', (d) => d[1])
  .encode('shape', 'smooth')
  .style('stroke', '#30BF78')
  .style('lineWidth', 2)
  .label({
    text: 'y = 3477.32e^(0.18x)\nThe coefficient of determination, or R^2, is 0.998',
    selector: 'last',
    style: {
      textAlign: 'end',
    },
  });

chart.render();

目前 log 的 ticks 算法有点不符合预期，所以需要通过 tickCount 手动设置，这里需要在 @antvis/scale 里面处理一下。

这里已经解决，后续会在 G2 中变成默认逻辑。