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

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

<img width="685" alt="image" src="https://github.com/antvis/G2/assets/49330279/7a884f95-fdcc-44a5-bd1b-aa6b2edca2a5">

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

如果我想继续实现饼图应该如何写呢，我将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数)作为饼图的饼块。

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

<img alt="image" width="685" src="https://private-user-images.githubusercontent.com/49330279/295168480-7a884f95-fdcc-44a5-bd1b-aa6b2edca2a5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDUzMDE4NTMsIm5iZiI6MTcwNTMwMTU1MywicGF0aCI6Ii80OTMzMDI3OS8yOTUxNjg0ODAtN2E4ODRmOTUtZmRjYy00NGE1LWJkMWItYWE2YjJlZGNhMmE1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTE1VDA2NTIzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFhMjRjMGVhMmE2M2JkZGNiZjFlZDRiZGY1ZWJkMTJhYjFlMTY1NWU2NjlhNzdhYTg1MWViYzA1YjVhY2I5MDgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.esq2fb-AYJP4z_gLvTSsVpfTK0vH4tlIgTVwGBjcigI"> ```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

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

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

换用另一个方案了

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

换用另一个方案了

请问如何解决的

这个 PR https://github.com/antvis/G2/pull/6250 解决了该问题，等发布之后就可以按照里面的描述使用了

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

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

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

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

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

@CODPHISH

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

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

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

这个能力已经发布：5.1.21