组织者：前端早早聊
分享人：泽辉，小米
应用场景
- web版的xmind，支持定制需求。应用于测试用例管理。
- 智能制造工艺流程、资产原型管理、前端能力地图管理、小米笔记思维导图。自定义节点、节点间的连接。
起步面临的问题
- 技术选型繁多
- 有些选型不再迭代
- 可控制集成扩展有限，比如支持DOM自定义、扩展至React/Vue
- 业务组件化诉求高，定制化需求无法开箱即用，二次开发成本高
目标
- 满足丰富的应用场景
- 技术层面定制化程度高。底层可控、算法可控、工作流可控。
技术选型
底层使用D3.js
- 控制粒度精细
- 成熟产品丰富
方案设计
mife-graphic实现方案
1.引擎
- D3.js、Echarts、Antv、mife-graphic.core
2.Component扩展
-
Component.chart
-
Component.flow
-
Component.okr
-
...
3.Editor/React/Vue上层封装
- Hina-Editor、Sale-Manage...
物料市场
各个组件 -> 不同的组合 -> 不同的功能需要
Graphic API
Constructors
- constructor
Properties
- data
- gLink
- gNode
- gTransform
- gZoom ....
Methods
- resizeUpdate
- setTransform ...
通过继承这一层组件可以开发更多的底层组件。
简单实现
selection-init
export function svgInit(this: Core.Graphic, selection: d3.Selection<any, any, any, any>) {
const { clientWidth, clientHeight } = this.options.container;
this.svg = selection
.append('svg')
.attr('viewBox', [0, 0, clientWidth, clientHeight].join(' '))
.style('width', `${clientWidth}px`)
.style('height', `${clientHeight}px`)
.style('position', 'absolute')
.style('top', '0')
.style('left', '0')
return this.svg;
}
selection-event
selection-update
...
实现都比较容易理解，这里不一一例举了。
方案设计核心原则
单一职责原则
- 一个程序只做好一件事
- 如果功能过于复杂就拆分开，每个部分保持独立
开放/封闭原则
- 对扩展开放，对修改封闭
- 增加需求时，扩展新代码，而非修改已有代码
目标达成
Mind脑图
- 布局/编辑/折叠
- 历史记录/复制粘贴
OKR扩展
- React扩展
- 子节点全自动布局
性能和扩展
性能优化粒度可控，达到最小Funtion。
对主流框架扩展性保持良好，未来底层考虑扩展Canvas/WebGL。
数据推荐
《数据可视化(40位数据设计师访谈录)》
