Interaction Grammar

[pearmini]

交互

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));

[pearmini]

elementHighlight

const options = {
  services: [
    { type: 'hoverElement' },
    { type: 'relateElement' },
  ],
  transformers: [
    { type: 'setState', state: 'highlight' },
    { type: 'renderLink' },
    { type: 'renderBackground' }
  ]
};

[pearmini]

elementSelect

const options = {
  services: [
    { type: 'clickElement' },
    { type: 'relateElement' },
  ],
  transformers: [
    { type: 'setState', state: 'highlight' },
    { type: 'renderLink' },
    { type: 'renderBackground' }
  ]
};