antvis/G6

数据 - 支持配置远程数据 #4934

Yanyan-Wang posted onGitHub

Issue Hunt 计划(可选)

  • 我同意将这个 Issue 参与 Issue Hunt 计划

Issue 难度

中等难度

悬赏

请在 2023 年 9 月 30 日之前完成 PR,10 月 15 日之前完成全部 CR 意见的修改。 AntV 将支付 $20 (汇率按结算当日计)

问题描述

目前 v5 beta 的 graph 配置支持的数据格式有:

https://github.com/antvis/G6/blob/bf12667b3e1f627461831f766ab0300bdb97f914/packages/g6/src/types/spec.ts#L72

// 普通的图数据
export interface GraphData {
  nodes?: NodeUserModel[];
  edges?: EdgeUserModel[];
  combos?: ComboUserModel[];
}

// 树图数据
export type TreeData =
  | ITreeData<NodeUserModelData>
  | ITreeData<NodeUserModelData>[];

// 普通图数据的 inline 读取方式
export interface InlineGraphDataConfig {
  type: 'graphData';
  value: GraphData;
}
// 树图数据的 inline 读取方式
export interface InlineTreeDataConfig {
  type: 'treeData';
  value: TreeData;
}

// TODO:未实现,远程数据获取,应拆分为 type: 'fetch-graphData' 和 'fetch-treeData' 两种,分别对应  FetchGraphDataConfig 和 FetchTreeDataConfig 。
export interface FetchDataConfig {
  type: 'fetch';
  value: string; // 远程 json 地址,例如:https://assets.antv.antgroup.com/g6/eva-3d.json
}

export type DataConfig =
  | GraphData
  | InlineGraphDataConfig
  | InlineTreeDataConfig
  | FetchDataConfig; // 应拆分为 FetchGraphDataConfig 和 FetchTreeDataConfig 两种

然后应在数据控制器(dataController)中解析对应数据(type 为 'fetch-graphData' 和 'fetch-treeData' 的情况):

https://github.com/antvis/G6/blob/bf12667b3e1f627461831f766ab0300bdb97f914/packages/g6/src/runtime/controller/data.ts#L582

另外,应当考虑在数据增量更新、替换时的情况。

重现链接

https://github.com/antvis/G6/blob/bf12667b3e1f627461831f766ab0300bdb97f914/packages/g6/src/runtime/controller/data.ts#L582

重现步骤

  1. clone g6 代码
git clone https://github.com/antvis/G6.git
  1. 拉取所有线上分支
git fetch
  1. 切换到 v5 分支
git checkout v5
  1. 进入 g6 包
cd packages/g6
  1. 安装依赖
npm install
  1. 启动 demo
npm run dev
  1. 实现功能、新增 demo 以测试

demo 位于 packages/g6/tests/integration

测试用例的编写以及测试方式参考:https://github.com/antvis/G6/pull/4793

  1. 提交代码,等待 CR

  2. 根据(多次) CR 建议修改

  3. 等待合并入 v5 分支后,管理员支付奖金

预期行为

graph 的 data 配置项支持 fetch-graphData 和 fetch-treeGraphData 两种远程数据获取方式,并进行正确的数据解析和渲染,考虑数据增量更新、全量替换的情况。

PR 中应当包含测试用例、集成测试截图、效果截图等

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]
  • G6 版本: [5.0-beta]

屏幕截图或视频(可选)

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 github-actions[bot] over 1 year ago

This plan has been removed from future features.

posted by Aarebecca over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests