-
Notifications
You must be signed in to change notification settings - Fork 1.6k
/
drag-point.ts
115 lines (100 loc) · 3.24 KB
/
drag-point.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import { Chart, registerInteraction, registerAction, Action } from '@antv/g2';
class DragPoint extends Action {
// Action 开始,不等同于 拖拽开始,需要判定移动的范围
protected starting = false;
// 拖拽开始
protected dragStart = false;
// 开始的节点
protected startPoint: any;
protected target: any = null;
start() {
this.starting = true;
this.startPoint = this.context.getCurrentPoint();
const { target } = this.context.event;
// 只对 point 起拖拽作用
if (String(target.get('name')) === 'element,point') {
this.target = target;
}
}
drag() {
if (!this.startPoint || !this.target) return;
const current = this.context.getCurrentPoint();
const { view } = this.context;
const event = this.context.event;
if (!this.dragStart) {
// 只能上下移动
if (Math.abs(current.y - this.startPoint.y) > 4) {
view.emit('dragstart', {
target: event.target,
x: event.x,
y: event.y,
});
this.dragStart = true;
}
} else {
view.emit('drag', {
target: event.target,
x: event.x,
y: event.y,
});
}
const { shape } = this.target.get('element');
shape.attr('y', current.y);
}
end() {
if (this.dragStart) {
const view = this.context.view;
const event = this.context.event;
const { shape } = this.target.get('element');
const scale = view.getScalesByDim('y')['nlp'];
const coordinate = view.getCoordinate();
const changedValue = scale.invert(coordinate.invertPoint({ x: 0, y: shape.attr('y') }).y);
const origin = this.target.get('origin');
view.emit('dragend', {
target: event.target,
x: event.x,
y: event.y,
changedDatum: { ...origin.data, nlp: changedValue },
});
}
this.target = null;
this.starting = false;
this.dragStart = false;
}
}
registerAction('drag-point', DragPoint);
registerInteraction('custom-interaction', {
start: [{ trigger: 'element:mousedown', action: 'drag-point:start' }],
processing: [{ trigger: 'plot:mousemove', action: 'drag-point:drag' }],
end: [{ trigger: 'plot:mouseup', action: 'drag-point:end' }],
});
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/blockchain.json')
.then((data) => data.json())
.then((data) => {
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
chart.data(data);
chart.line().position('date*blockchain').color('#1890ff');
chart.line().position('date*nlp').color('#2fc25b');
chart.point().position('date*nlp').color('#2fc25b').size(3).style({ zIndex: 2 });
chart.scale('blockchain', { sync: true });
chart.scale('nlp', { sync: 'blockchain' });
chart.axis('nlp', false);
chart.option('slider', { start: 0.2, end: 0.4 });
chart.interaction('custom-interaction');
chart.render();
chart.tooltip({ showCrosshairs: true, showMarkers: false });
chart.on('dragend', ({ changedDatum }) => {
const newData = data.map((d) => {
if (d.date === changedDatum.date) {
return changedDatum;
}
return d;
});
chart.data(newData);
chart.render(true);
});
});