Skip to content

关系图改成直接使用 G6,去掉 ADC + preact 的方式。 #306

@hustcc

Description

@hustcc

背景

目前 src/ai/vis 中的关系图,都是使用 @ant-design/graphs 包,他是一个 react 的包,所以需要用 react 封装成非技术栈依赖,带来问题:

  1. 技术实现上复杂,也依赖了更多的层级
  2. 包大小更大
  3. 带来一些 preact 无法解决的 bug

方案和执行

方案,是直接基于 G6 去实现关系图,去掉中间的 Ant Design Chart 封装,以及 React 的再次包装,让 gpt-vis 的组件技术实现保持一致。

  1. 对关系图进行重构,去掉 @ant-design/graphs ,改用 @antv/g6。
  2. 认真扫描 https://github.com/ant-design/ant-design-charts/tree/master/packages/graphs 目录的所有代码,摘取出和对应关系图表相关的配置,特别是节点的自定义 html 样式
  3. 使用 jss 去管理 css in js
  4. 保持 API 接口不变

可以慢慢想,仔细想,确保生成质量。

要求

  • 确保在 ui 上和原 @ant-design/graphs 一致
  • 代码保证简洁,精炼
  • 非 src/ai 目录的代码不要动
  • 执行完之后,在 根目录 执行 npm run format 保持代码 ci lint 是对的

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions