折线图设置base不成功

[Yhui11]

[Yhui11]

具体的代码

[pearmini]

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

[Yhui11]

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

[pearmini]

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

[fff21]

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

是的

[Yhui11]

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

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

[pearmini]

可以设置 tickCount 试一下：

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

[Yhui11]

可以设置 tickCount 试一下：

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

加了好像报错

[Yhui11]

可以设置 tickCount 试一下：

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

能不能加个好友，感谢

[pearmini]

@Yhui11 这里有我的钉钉

[pearmini]

可以设置 tickCount 试一下：

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

加了好像报错

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

[Yhui11]

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

[pearmini]

对数坐标是指？

[Yhui11]

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

[pearmini]

/**
 * 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();

[Yhui11]

/**
 * 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轴都要是对数显示。

[Yhui11]

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();

代码在这里

[pearmini]

使用 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();

[pearmini]

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

[hustcc]

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