binX分箱后进行颜色编码，箱内颜色分层

[Exlau]

问题描述

我在使用binX进行分箱，想对每个箱的颜色进行区分，但是没有找到比较好办法，除非手动对数据进行分箱标注。
有没有办法直接实现？

重现链接

https://codesandbox.io/p/sandbox/antv-issue-exlau-d3snf2?file=%2Fsrc%2Findex.js%3A11%2C10

重现步骤

No response

预期行为

期望每个箱有独立的颜色，箱内颜色不区分。
实际每个箱内的颜色分层。

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

补充说明（可选）

分组聚合

[pearmini]

可以参考下面的写法，给每一个组自定义一个 color 通道的 reducer：

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

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

chart
  .rect()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/unemployment2.json',
  })
  .encode('x', 'rate')
  .transform({
    type: 'binX',
    y: 'count',
    color: () => Math.random() + '',
    thresholds: 5,
  })
  .style('inset', 0.5)
  .legend('color', false);

chart.render();

[Exlau]

如果我想继续实现饼图应该如何写呢，我将coordinate设置为'theta'后报错.

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

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

chart
  .rect()
  .data({
    type: "fetch",
    value: "https://assets.antv.antgroup.com/g2/unemployment2.json",
  })
  .coordinate({
    type: "theta",
  })
  .transform({
    type: "binX",
    y: "count",
    color: () => Math.random() + "",
    thresholds: 5,
  })
  .style("inset", 0.5)
  .legend("color", false);

chart.render();

如果将type设置为interval，则会继续出现颜色分层

期望结果是每个箱(binX后的count数)作为饼图的饼块。

[Exlau]

可以参考下面的写法，给每一个组自定义一个 color 通道的 reducer：

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

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

chart
.rect()
.data({
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/unemployment2.json',
})
.encode('x', 'rate')
.transform({
type: 'binX',
y: 'count',
color: () => Math.random() + '',
thresholds: 5,
})
.style('inset', 0.5)
.legend('color', false);

chart.render();

BTW，如果在该示例中想要使用label，应该怎么设置text值呢？例如：将每个箱的count显示在顶部。 @pearmini

[allure11]

如果在该示例中想要使用label，应该怎么设置text值呢？例如：将每个箱的count显示在顶部。
请问这个问题解决了吗？

[Exlau]

如果在该示例中想要使用label，应该怎么设置text值呢？例如：将每个箱的count显示在顶部。 请问这个问题解决了吗？

换用另一个方案了

[CODPHISH]

如果在该示例中想要使用label，应该怎么设置text值呢？例如：将每个箱的count显示在顶部。 请问这个问题解决了吗？

换用另一个方案了

请问如何解决的

[pearmini]

这个 PR #6250 解决了该问题，等发布之后就可以按照里面的描述使用了

[CODPHISH]

这个 PR #6250 解决了该问题，等发布之后就可以按照里面的描述使用了

你好，选择binX分箱后，貌似threshold的值与图表柱子数量也对不上

[pearmini]

@CODPHISH 这里的 thresholds 只是一个估计的值，并且不是最后的值，可以参考 https://d3js.org/d3-array/bin#bin_thresholds

[CODPHISH]

@CODPHISH 这里的 thresholds 只是一个估计的值，并且不是最后的值，可以参考 https://d3js.org/d3-array/bin#bin_thresholds

你好，查看了d3文档，说如果thresholds输入具体数值，会尽可能的返回count + 1个分箱，但现在的图误差很悬殊，尝试对thresholds步近10-30个单位，每次步进1，几乎步长大于10，甚至20后，才会出现一次新的分箱

[pearmini]

@CODPHISH

approximately 不是“尽可能”的意思，是“大概”的意思。因为返回的 tick 首先要满足可读性：1，2，5 * 10 ^ n 的约束，所以当划分区间较小的时候（比如图中的0到28），合适的划分方法本来就不多，所以会出现一个划分方法对应多个 tickCount（甚至10个） 的情况。

如果希望“尽可能”返回 count 个分箱，建议自己计算 thresholds 的到一个数组，并且把这个数组设置为 thresholds。

chart.rect().transform({
  type: 'binX',
  y: 'count',
  thresholds: [/** 计算得到 ticks **/],
});

[pearmini]

这个能力已经发布：5.1.21