G2源码解析之代码组织结构
版本:V5.0.0-beta.10
背景
G2源码阅读系列文章的前置任务,学习优秀开源框架、熟悉代码组织结构,了解核心模块。
代码组织结构(仅Src下的目录)
.
├── animate // 动画相关
│ ├── animation
│ │ ├── fade.ts
│ │ ├── grow-in.ts
│ │ ├── index.ts
│ │ ├── path-in.ts
│ │ ├── position-update.ts
│ │ ├── scale-in.ts
│ │ ├── sector-path-update.ts
│ │ ├── util.ts
│ │ ├── wave-in.ts
│ │ └── zoom.ts
│ ├── index.ts
│ └── interface.ts
├── chart // 图表相关
│ ├── controller // 控制器
│ │ ├── annotation.ts
│ │ ├── axis.ts // 坐标轴
│ │ ├── base.ts
│ │ ├── coordinate.ts
│ │ ├── gesture.ts
│ │ ├── index.ts
│ │ ├── legend.ts // 图例
│ │ ├── scrollbar.ts
│ │ ├── slider.ts // 滑块
│ │ └── tooltip.ts // 提示框
│ ├── layout // 布局相关
│ │ ├── constraint
│ │ │ ├── bounds.ts
│ │ │ ├── constraint.ts
│ │ │ ├── gauss.ts
│ │ │ ├── index.ts
│ │ │ ├── solver.ts
│ │ │ ├── types.ts
│ │ │ └── variable.ts
│ │ ├── auto.ts
│ │ ├── index.ts
│ │ └── padding-cal.ts
│ ├── util
│ │ ├── scale-pool.ts
│ │ └── sync-view-padding.ts
│ ├── chart.ts
│ ├── event.ts
│ ├── index.ts
│ └── view.ts
├── component
│ ├── labels.ts
│ └── update-label.ts
├── engine
│ └── index.ts
├── facet
│ ├── circle.ts
│ ├── facet.ts
│ ├── index.ts
│ ├── list.ts
│ ├── matrix.ts
│ ├── mirror.ts
│ ├── rect.ts
│ └── tree.ts
├── geometry
│ ├── element
│ │ └── index.ts
│ ├── label
│ │ ├── layout
│ │ │ ├── interval
│ │ │ │ ├── adjust-position.ts
│ │ │ │ └── hide-overlap.ts
│ │ │ ├── path
│ │ │ │ └── adjust-position.ts
│ │ │ ├── pie
│ │ │ │ ├── distribute.ts
│ │ │ │ ├── outer.ts
│ │ │ │ ├── spider.ts
│ │ │ │ └── util.ts
│ │ │ ├── point
│ │ │ │ └── adjust-position.ts
│ │ │ ├── worker
│ │ │ │ └── hide-overlap.ts
│ │ │ ├── adjust-color.ts
│ │ │ ├── hide-overlap.ts
│ │ │ ├── limit-in-canvas.ts
│ │ │ ├── limit-in-plot.ts
│ │ │ ├── limit-in-shape.ts
│ │ │ └── overlap.ts
│ │ ├── util
│ │ │ ├── createWorker.ts
│ │ │ └── index.ts
│ │ ├── base.ts
│ │ ├── index.ts
│ │ ├── interface.ts
│ │ ├── interval.ts
│ │ ├── pie.ts
│ │ └── polar.ts
│ ├── shape
│ │ ├── area
│ │ │ ├── index.ts
│ │ │ ├── line.ts
│ │ │ ├── smooth-line.ts
│ │ │ ├── smooth.ts
│ │ │ └── util.ts
│ │ ├── edge
│ │ │ ├── arc.ts
│ │ │ ├── index.ts
│ │ │ ├── smooth.ts
│ │ │ ├── util.ts
│ │ │ └── vhv.ts
│ │ ├── interval
│ │ │ ├── funnel.ts
│ │ │ ├── hollow-rect.ts
│ │ │ ├── index.ts
│ │ │ ├── line.ts
│ │ │ ├── pyramid.ts
│ │ │ ├── tick.ts
│ │ │ └── util.ts
│ │ ├── line
│ │ │ ├── index.ts
│ │ │ ├── step.ts
│ │ │ └── util.ts
│ │ ├── point
│ │ │ ├── hollow.ts
│ │ │ ├── image.ts
│ │ │ ├── index.ts
│ │ │ ├── solid.ts
│ │ │ └── util.ts
│ │ ├── polygon
│ │ │ ├── index.ts
│ │ │ └── square.ts
│ │ ├── schema
│ │ │ ├── box.ts
│ │ │ ├── candle.ts
│ │ │ └── index.ts
│ │ ├── util
│ │ │ ├── get-path-points.ts
│ │ │ ├── get-style.ts
│ │ │ ├── path.ts
│ │ │ └── split-points.ts
│ │ ├── violin
│ │ │ ├── hollow.ts
│ │ │ ├── index.ts
│ │ │ └── smooth.ts
│ │ ├── base.ts
│ │ └── constant.ts
│ ├── util
│ │ ├── diff.ts
│ │ ├── get-shape-type.ts
│ │ ├── group-data.ts
│ │ ├── is-model-change.ts
│ │ ├── parse-fields.ts
│ │ └── shape-size.ts
│ ├── area.ts
│ ├── base.ts
│ ├── edge.ts
│ ├── heatmap.ts
│ ├── interval.ts
│ ├── line.ts
│ ├── path.ts
│ ├── point.ts
│ ├── polygon.ts
│ ├── schema.ts
│ └── violin.ts
├── interaction
│ ├── action
│ │ ├── component
│ │ │ ├── axis
│ │ │ │ └── axis-description.ts
│ │ │ ├── tooltip
│ │ │ │ ├── ellipsis-text.ts
│ │ │ │ ├── geometry.ts
│ │ │ │ └── sibling.ts
│ │ │ ├── list-active.ts
│ │ │ ├── list-checked.ts
│ │ │ ├── list-focus.ts
│ │ │ ├── list-highlight-util.ts
│ │ │ ├── list-highlight.ts
│ │ │ ├── list-radio.ts
│ │ │ ├── list-selected.ts
│ │ │ ├── list-state.ts
│ │ │ └── list-unchecked.ts
│ │ ├── data
│ │ │ ├── filter.ts
│ │ │ ├── range-filter.ts
│ │ │ └── sibling-filter.ts
│ │ ├── element
│ │ │ ├── active.ts
│ │ │ ├── filter.ts
│ │ │ ├── highlight-by-color.ts
│ │ │ ├── highlight-by-x.ts
│ │ │ ├── highlight-util.ts
│ │ │ ├── highlight.ts
│ │ │ ├── link-by-color.ts
│ │ │ ├── range-active.ts
│ │ │ ├── range-highlight.ts
│ │ │ ├── range-selected.ts
│ │ │ ├── range-state.ts
│ │ │ ├── selected.ts
│ │ │ ├── sibling-filter.ts
│ │ │ ├── single-active.ts
│ │ │ ├── single-highlight.ts
│ │ │ ├── single-selected.ts
│ │ │ ├── single-state.ts
│ │ │ ├── state-base.ts
│ │ │ └── state.ts
│ │ ├── mask
│ │ │ ├── multiple
│ │ │ │ ├── base.ts
│ │ │ │ ├── circle.ts
│ │ │ │ ├── dim-rect.ts
│ │ │ │ ├── path.ts
│ │ │ │ ├── rect.ts
│ │ │ │ └── smooth-path.ts
│ │ │ ├── base.ts
│ │ │ ├── circle.ts
│ │ │ ├── dim-rect.ts
│ │ │ ├── path.ts
│ │ │ ├── rect.ts
│ │ │ └── smooth-path.ts
│ │ ├── view
│ │ │ ├── button.ts
│ │ │ ├── drag.ts
│ │ │ ├── mousewheel-scroll.ts
│ │ │ ├── move.ts
│ │ │ ├── scale-transform.ts
│ │ │ ├── scale-translate.ts
│ │ │ └── scale-zoom.ts
│ │ ├── active-region.ts
│ │ ├── base.ts
│ │ ├── callback.ts
│ │ ├── cursor.ts
│ │ ├── index.ts
│ │ ├── register.ts
│ │ └── util.ts
│ ├── context.ts
│ ├── grammar-interaction.ts
│ ├── index.ts
│ └── interaction.ts
├── theme
│ ├── style-sheet
│ │ ├── dark.ts
│ │ └── light.ts
│ ├── util
│ │ ├── create-by-style-sheet.ts
│ │ ├── create-theme.ts
│ │ └── index.ts
│ └── index.ts
├── util
│ ├── annotation.ts
│ ├── attr.ts
│ ├── axis.ts
│ ├── bbox.ts
│ ├── collision-detect.ts
│ ├── color.ts
│ ├── context.ts
│ ├── coordinate.ts
│ ├── direction.ts
│ ├── dom.ts
│ ├── event.ts
│ ├── facet.ts
│ ├── graphics.ts
│ ├── grid.ts
│ ├── helper.ts
│ ├── legend.ts
│ ├── marker.ts
│ ├── padding.ts
│ ├── scale.ts
│ ├── stat.ts
│ ├── text.ts
│ ├── tooltip.ts
│ ├── transform.ts
│ └── types.ts
├── api.ts
├── base.ts
├── constant.ts
├── core.ts
├── dependents.ts
├── index.ts
└── interface.ts
小结
G2
是一个基于图形语法的图表引擎。以自底向上的方式组织最基本的元素形成更高级的元素。
在src/chart/*
下定义了布局、控制器等。src/geometry/shape/*
下定义各个图元映射。
通过设置数据、建立数据到视觉通道的映射、为图元设置样式的逻辑形式来实现图表的最终绘制。
以下统计了V5.0.0-beta.10
src下的文件及代码详情。
1 | Language files blank comment code |