const container = createDiv();
const chart = new Chart({
container,
autoFit: true,
width: 300,
height: 300,
padding: 0,
});
chart.data(data);
chart.scale('category', {
type: 'cat',
values: ['A', 'B', 'C', 'D', 'E'],
range: [0, 1],
nice: true,
});
chart.axis('category', {
grid: {
alignTick: false,
},
});
chart.point().adjust('jitter').position('category*value');
chart.render();
https://github.com/antvis/G2/blob/b0ae2314fc39fec21cb98ada305eaceb02f13bc9/src/geometry/base.ts#L1825
result
的值类似下面这样的
[
[
{ "category": 0, "value": 1, "_origin": { "category": "A", "value": 1 } },
{ "category": 0, "value": 1.5, "_origin": { "category": "A", "value": 1.5 } },
{ "category": 1, "value": 2, "_origin": { "category": "B", "value": 2 } },
{ "category": 1, "value": 2, "_origin": { "category": "B", "value": 2 } },
{ "category": 1, "value": 2, "_origin": { "category": "B", "value": 2 } },
{ "category": 1, "value": 2, "_origin": { "category": "B", "value": 2 } },
{ "category": 1, "value": 2, "_origin": { "category": "B", "value": 2 } },
{ "category": 1, "value": 2, "_origin": { "category": "B", "value": 2 } },
{ "category": 1, "value": 2, "_origin": { "category": "B", "value": 2 } },
{ "category": 1, "value": 2, "_origin": { "category": "B", "value": 2 } },
{ "category": 3, "value": 3, "_origin": { "category": "D", "value": 3 } },
{ "category": 3, "value": 3, "_origin": { "category": "D", "value": 3 } },
{ "category": 3, "value": 3, "_origin": { "category": "D", "value": 3 } },
{ "category": 3, "value": 3, "_origin": { "category": "D", "value": 3 } },
{ "category": 3, "value": 3, "_origin": { "category": "D", "value": 3 } },
{ "category": 3, "value": 3, "_origin": { "category": "D", "value": 3 } },
{ "category": 3, "value": 3, "_origin": { "category": "D", "value": 3 } },
{ "category": 3, "value": 3, "_origin": { "category": "D", "value": 3 } },
{ "category": 3, "value": 3, "_origin": { "category": "D", "value": 3 } },
{ "category": 4, "value": 3, "_origin": { "category": "E", "value": 3 } }
]
]
adjust获取到的data是没有 category:C
的,adjust不知道有C这个种类,但是scale会影响绘图坐标刻度,scale多了C这个category,这就导致了绘制几何图形B种类的点跑到C区域里去。
adjust的实现属于另外一个repo
https://github.com/antvis/adjust/blob/7447e756a31ef25d911e021109cc99742cb6e63a/src/adjusts/jitter.ts
理论上没什么问题,但是没有考虑到 scale造成的影响。