The issue has been closed
What problem does this feature solve?
Translation:
Requirement: when the amount of data is too large, we need to implement pan drag and zoom to see more detailed results.
We have constructed the profile of the pipeline. The bottom line in the demo below is regarded as the pipeline, the vertical line is regarded as the tube well, and the gray dotted line is regarded as the ground. As the amount of data increases, we allow users to zoom and drag to see more detailed trends.
Problem encountered: when we drag or zoom, it appears the phenomenon of dislocation.
需求：当数据量过大时，我们需要实现平移拖拽和缩放以查看更加详细的结果。
我们构建了管线的纵断面图，下面demo中的最底下的线视为管线，竖起来的视为管井，灰色虚线视为地面。随着数据量的增大，我们允许用户缩放，拖拽查看更详细的变化趋势。
遇到的问题：当我们在拖拽或缩放时，它出现了错位的现象。
demo：https://codesandbox.io/s/quiet-platform-1zqre?file=/index.ts
What does the proposed API look like?
期望存在将多个view重新合并为一个chart的功能。
<!-- generated by antv-issue-helper. DO NOT REMOVE -->
我也遇到这个问题，恐怕要自己增加处理。
以下是我的处理方式（以平移为例）：
定制自己的Action（参考src/interaction/action/view/scale-transform.ts）。在定制的Action里，getScale 如果当前View取不到Scale则从子View取，translateLinear 分别委派给子View
protected getScale(dim) {
const view = this.context.view;
if (dim === "x") {
let xs = view.getXScale();
if (!xs && view.views.length > 0) {
xs = view.views[0].getXScale();
}
return xs;
} else {
let ys = view.getYScales()[0];
if (!ys && view.views.length > 0) {
ys = view.views[0].getYScales()[0];
}
return ys;
}
}
// ...
private translateLinear(dim, scale, normalPoint) {
const view = this.context.view;
const { min, max } = this.startCache[dim];
const range = max - min;
const d = normalPoint[dim] * range;
if (!this.cacheScaleDefs[dim]) {
this.cacheScaleDefs[dim] = {
nice: false,
min,
max,
};
}
// view.scale(scale.field, {
// nice: false,
// min: min + d,
// max: max + d,
// });
for (const v of view.views) {
v.scale(scale.field, {
nice: false,
min: min + d,
max: max + d,
});
}
}
注册Action和交互（throttle调小一些）
registerAction("time-scale-translate", TimeScaleTranslate);
registerInteraction("drag-move", {
start: [{ trigger: "plot:mousedown", action: "time-scale-translate:start" }],
processing: [
{
trigger: "plot:mousemove",
action: "time-scale-translate:translate",
throttle: { wait: 16, leading: true, trailing: false },
},
],
end: [{ trigger: "plot:mouseup", action: "time-scale-translate:end" }],
});
- chart和各子View关闭动画（`.animate(false)`）
posted by pearmini 11 months ago 
IssueHunt