AlgoViz Lab交互式算法学习
创建与转换

RxJS fromEvent + map

把 DOM 事件转换为 Observable，再提取鼠标横坐标。

fromEvent(click) → map(clientX)

时间线如何变化

  1. 1
    第一次点击

    fromEvent 把 DOM click 推送给 Observable。

  2. 2
    提取 clientX

    map 只保留横坐标 120。

  3. 3
    第二次点击

    每次事件都独立映射为一个数值。

  4. 4
    持续监听

    订阅保持开启，后续点击继续进入数据流。

受支持的示例代码

实验室只根据下列示例中的关键操作符生成预设时间线，不执行任意输入代码。

import { fromEvent, map } from 'rxjs'

const clicks$ = fromEvent(document, 'click')
const x$ = clicks$.pipe(
  map(event => event.clientX)
)

x$.subscribe(console.log)