IssueHuntantvis/G2
The issue has been closed
[WIP]: 交互设计 #4208
pearmini posted onGitHub
交互
WIP
交互已经根据按照 4.0 以及山大的交互语法实现了一版，但目前还存在一些问题，这里对交互语法进行修改，目的是解决这些问题。
存在问题
- 声明交互的方式和传统声明交互的方式差别太大。
- Action 的拆分没有在易用性和复用性找到合适的平衡。
开始
这里用高亮交互举例子。
const options = {
interactions: [{ type: 'highlight', stroke: 'red' }],
}有以下实现方式：
// 交互语法
// API 形式
chart.observe('plot:pointermove')
.pipe({ type: 'selectElements' })
.subscribe({ type: 'highlightSelectedElements' })
// Spec 形式
const options = {
observe: [
{
event: 'plot:pointermove',
pipe: [{ type: 'selectElements' }],
subscribe: [{ type: 'highlightSelectedElements' }],
},
],
};设计
API 形式的设计参考了 RXJS，一种声明形式处理事件的方式。
Think of RxJS as Lodash for events.
let count = 0;
const rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', (event) => {
if (Date.now() - lastClick >= rate) {
count += event.clientX;
console.log(count);
lastClick = Date.now();
}
});import { fromEvent, throttleTime, map, scan } from 'rxjs';
fromEvent(document, 'click')
.pipe(
throttleTime(1000),
map((event) => event.clientX),
scan((count, clientX) => count + clientX, 0)
)
.subscribe((count) => console.log(count));