The issue has been closed
Issue Hunt 计划（可选）
Issue 难度
中等难度
悬赏
请在 2023 年 7 月 1 日之前完成 PR，7 月 15 日之前完成全部 CR 意见的修改。
AntV 将支付 $35 (汇率按结算当日计)
问题描述
将 G6 4.x 中的 TimeBar 插件 迁移到 5.0 中，注意：
重现链接
https://github.com/antvis/G6/blob/v5/packages/g6/src/stdlib/plugin/minimap/index.ts
重现步骤
- clone g6 代码
git clone https://github.com/antvis/G6.git
- 拉取所有线上分支
git fetch
- 切换到 v5 分支
git checkout v5
- 进入 g6 包
cd packages/g6
- 安装依赖
npm install
- 启动 demo
npm run dev
- 实现功能、新增 demo 以测试
demo 位于 packages/g6/tests/integration
提交代码，等待 CR
根据（多次） CR 建议修改
等待合并入 v5 分支后，管理员支付奖金
预期行为
将 G6 4.x 中的 TimeBar 插件 迁移到 5.0 中，注意：
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
请复制以下模板，填写相关信息，然后删除模板中的注释。
Please copy the following template, fill in the relevant information, and then delete the comments in the template.
## Issue 认领 / Issue Claim
**贡献者/Contributor**
> 例如：张三, 李四
> For example: John Smith, Sarah Johnson
**预计完成时间/Estimated Completion Date**
> 例如：2023-06-06
> For example: May 30, 2023
**联系方式/Contact Information**
> 例如：contact@email.com
> For example: contact@email.com
**其他信息/Additional Information**
> 例如：这个 issue 比预期的要复杂，我希望能获得更多的奖励
> For example: This issue is more complex than expected, and I hope to receive more reward.
posted by ColdGun1998 almost 2 years ago 
这个还挺复杂的哈，加钉钉猎人群，有问题可以问
建议：
建议将 Timebar 中部分工具方法抽出以解耦。
这有助于你更快理解 Timebar 逻辑并缩短开发时间，并且可以帮助第三方 Timebar 组件更好地与 G6 协作。
数据过滤
根据时间范围筛选出相应的数据
// range 元素值为时间戳，为 `number` 时表示单一时间，为元组时表示时间范围
type Range = number | [number, number];
// 用于从数据项中取出并标准化时间属性
type TimeGetter = {
edge?: (edge: Edge) => number;
node?: (node: Node) => number;
}
type FilterFn = (data: GraphData, range: Range, timeGetter: TimeGetter) => GraphData;
画布更新
将过滤得到的数据应用到画布中
type RenderFn = (graph: Graph, data: GraphData) => Promise<void>;
播放
结合上述方法，定时进行计算新数据并更新到画布
type PlayOptions = {
initRange: Range; // 默认范围
initState: 'play' | 'pause'; // 默认状态：播放、暂停
speed: number; // 播放速率，每秒更新的次数
sliding: number; // 每次更新时 Range 的变量。`>0`时正放，`<0` 时倒放
}
// 返回值为 播放、暂停、恢复、前进、后退 的操作函数
type PlayFn = (graph: Graph, options: PlayOptions) => {
play: () => void, // 播放
pause: () => void, // 暂停
resume: () => void, // 恢复
forward: () => void, // 前进
backward: () => void // 后退
}
上述定义仅供参考，如果有更好的设计也欢迎提 PR
相关逻辑参考： https://github.com/antvis/G6/blob/bb65cae51819d31f75dac06f9490b1cfc8d16e65/packages/plugin/src/timeBar/index.ts#L407-L438
posted by Yanyan-Wang over 1 year ago 
IssueHunt