G2
G2 copied to clipboard
antvis
binX分箱后进行颜色编码，箱内颜色分层
问题描述
我在使用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]
屏幕截图或视频（可选）
补充说明（可选）
分组聚合
可以参考下面的写法，给每一个组自定义一个 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();
如果我想继续实现饼图应该如何写呢，我将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：
```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显示在顶部。 请问这个问题解决了吗？
换用另一个方案了
请问如何解决的
这个 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 **/],
});