-
Notifications
You must be signed in to change notification settings - Fork 19.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug] ScatterChart brush selection with large amount of data is invalid #17079
Comments
Same issue here. Is there anybody on this ? :) |
Yes, they are the same, because no reply, thought not to be seen |
Brush selection doesnt seem to work with large data optimization which is enabled for both series ( I would appreciate getting a selection tool that either works with large data optimization or is better optimized to begin with. Here is the working code: function genData(len, offset) {
let arr = new Float32Array(len * 2);
let off = 0;
for (let i = 0; i < len; i++) {
let x = +Math.random() * 10;
let y =
+Math.sin(x) -
x * (len % 2 ? 0.1 : -0.1) * Math.random() +
(offset || 0) / 10;
arr[off++] = x;
arr[off++] = y;
}
return arr;
}
const data1 = genData(5e5);
const data2 = genData(5e5, 10);
option = {
title: {
text:
echarts.format.addCommas(data1.length / 2 + data2.length / 2) + ' Points'
},
tooltip: {},
toolbox: {
left: 'center',
feature: {
dataZoom: {}
}
},
legend: {
orient: 'vertical',
right: 10
},
xAxis: [{}],
yAxis: [{}],
dataZoom: [
{
type: 'inside'
},
{
type: 'slider'
}
],
animation: false,
brush: {
toolbox: ['rect', 'polygon', 'keep', 'clear'],
},
series: [
{
name: 'A',
type: 'scatter',
data: data1,
dimensions: ['x', 'y'],
symbolSize: 3,
itemStyle: {
opacity: 0.4
},
},
{
name: 'B',
type: 'scatter',
data: data2,
dimensions: ['x', 'y'],
symbolSize: 3,
itemStyle: {
opacity: 0.4
},
}
]
}; |
But the display of large amounts of data would be very slow |
Are you planning to improve the brush/selection tool in the near future? |
I hope to solve this problem, some business sometimes need to use, it is best to add circular box selection, triangle box selection and so on. |
I think the brush is slower than zoom, because the points in the selected region have to be rerendered/highlighted on every mousemove while the selection box is drawn, whereas the zoom is only calculated once on Should I open a new feature request for that? |
I think it is OK, depending on how much work you do. My business is mainly used for the Mapping of the wafer. |
I have the same problem here |
The following small change in the source code seems to work: // original code from BrushView.ts
private _onBrush(eventParam: BrushControllerEvents['brush']): void {
const modelId = this.model.id;
const areas = this.model.brushTargetManager.setOutputRanges(eventParam.areas, this.ecModel);
// Action is not dispatched on drag end, because the drag end
// emits the same params with the last drag move event, and
// may have some delay when using touch pad, which makes
// animation not smooth (when using debounce).
(!eventParam.isEnd || eventParam.removeOnClick) && this.api.dispatchAction({
type: 'brush',
brushId: modelId,
areas: zrUtil.clone(areas),
$from: modelId
});
eventParam.isEnd && this.api.dispatchAction({
type: 'brushEnd',
brushId: modelId,
areas: zrUtil.clone(areas),
$from: modelId
});
} by the following code: // changed code
private _onBrush(eventParam: BrushControllerEvents['brush']): void {
const throttleType = this.model.option.throttleType;
if (throttleType === 'debounce' && !eventParam.isEnd) {
return;
}
const modelId = this.model.id;
const areas = this.model.brushTargetManager.setOutputRanges(eventParam.areas, this.ecModel);
// Action is not dispatched on drag end, because the drag end
// emits the same params with the last drag move event, and
// may have some delay when using touch pad, which makes
// animation not smooth (when using debounce).
(throttleType === 'debounce' || !eventParam.isEnd || eventParam.removeOnClick) && this.api.dispatchAction({
type: 'brush',
brushId: modelId,
areas: zrUtil.clone(areas),
$from: modelId
});
eventParam.isEnd && this.api.dispatchAction({
type: 'brushEnd',
brushId: modelId,
areas: zrUtil.clone(areas),
$from: modelId
});
} using the Now use the brush component with debounce mode: brush: {
throttleType: 'debounce'
} And enable large data optimization mode for your series and set the series: [
{
type: 'scatter'.
...,
large: true,
largeThreshold: 99999999,
},
...
] |
Version
5.3
Link to Minimal Reproduction
https://echarts.apache.org/examples/zh/editor.html?c=scatter-large
Steps to Reproduce
The specific code is as follows:
The renderings are as follows:
Current Behavior
Does not get the value of the brush selection and has no visual effects
Expected Behavior
Can get the brush selected data and have a visual effect
Environment
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: