前言
拓扑图是数据可视化畛域一种比拟常见的展现类型，目前业界常见的可视化展示的计划有 ECharts、HighCharts、D3、AntV 等。以后的我的项目应用的是基于 ECharts 的动态关系图渲染，为了后续可能扩大成动静的拓扑图渲染，本文摸索了 ECharts 的原理以及 G6 的原理，也算是对自研一个可视化库的根本实现办法做了一个梳理。
计划抉择
-
ECharts
- 关系图
-
AntV
-
G6
- Graphin
-
源码解析
ECharts 源码
整个 ECharts 外围对外输入是一个大的 ECharts 类，所有的类型都是基于其进行 new 进去的实例，而其外围是基于对 ZRender 这样一个 Canvas 的封装
ECharts
class ECharts extends Eventful {
// 公共属性
group: string;
// 公有属性
private _zr: zrender.ZRenderType;
private _dom: HTMLElement;
private _model: GlobalModel;
private _throttledZrFlush: zrender.ZRenderType extends {flush: infer R} ? R : never;
private _theme: ThemeOption;
private _locale: LocaleOption;
private _chartsViews: ChartView[] = [];
private _chartsMap: {[viewId: string]: ChartView} = {};
private _componentsViews: ComponentView[] = [];
private _componentsMap: {[viewId: string]: ComponentView} = {};
private _coordSysMgr: CoordinateSystemManager;
private _api: ExtensionAPI;
private _scheduler: Scheduler;
private _messageCenter: MessageCenter;
private _pendingActions: Payload[] = [];
private _disposed: boolean;
private _loadingFX: LoadingEffect;
private _labelManager: LabelManager;
private [OPTION_UPDATED_KEY]: boolean | {silent: boolean};
private [IN_MAIN_PROCESS_KEY]: boolean;
private [CONNECT_STATUS_KEY]: ConnectStatus;
private [STATUS_NEEDS_UPDATE_KEY]: boolean;
// 爱护属性
protected _$eventProcessor: never;
constructor(
dom: HTMLElement,
theme?: string | ThemeOption,
opts?: {
locale?: string | LocaleOption,
renderer?: RendererType,
devicePixelRatio?: number,
useDirtyRect?: boolean,
width?: number,
height?: number
}
) {super(new ECEventProcessor());
opts = opts || {};
if (typeof theme === 'string') {theme = themeStorage[theme] as object;
}
this._dom = dom;
let defaultRenderer = 'canvas';
const zr = this._zr = zrender.init(dom, {
renderer: opts.renderer || defaultRenderer,
devicePixelRatio: opts.devicePixelRatio,
width: opts.width,
height: opts.height,
useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect
});
this._locale = createLocaleObject(opts.locale || SYSTEM_LANG);
this._coordSysMgr = new CoordinateSystemManager();
const api = this._api = createExtensionAPI(this);
this._scheduler = new Scheduler(this, api, dataProcessorFuncs, visualFuncs);
this._initEvents();
zr.animation.on('frame', this._onframe, this);
bindRenderedEvent(zr, this);
bindMouseEvent(zr, this);
}
private _onframe(): void {}
getDom(): HTMLElement {return this._dom;}
getId(): string {return this.id;}
getZr(): zrender.ZRenderType {return this._zr;}
setOption<Opt extends ECBasicOption>(option: Opt, notMerge?: boolean | SetOptionOpts, lazyUpdate?: boolean): void {if (lazyUpdate) {this[OPTION_UPDATED_KEY] = {silent: silent};
this[IN_MAIN_PROCESS_KEY] = false;
this.getZr().wakeUp();
}
else {prepare(this);
updateMethods.update.call(this);
this._zr.flush();
this[OPTION_UPDATED_KEY] = false;
this[IN_MAIN_PROCESS_KEY] = false;
flushPendingActions.call(this, silent);
triggerUpdatedEvent.call(this, silent);
}
}
private getModel(): GlobalModel {return this._model;}
getRenderedCanvas(opts?: {
backgroundColor?: ZRColor
pixelRatio?: number
}): HTMLCanvasElement {if (!env.canvasSupported) {return;}
opts = zrUtil.extend({}, opts || {});
opts.pixelRatio = opts.pixelRatio || this.getDevicePixelRatio();
opts.backgroundColor = opts.backgroundColor
|| this._model.get('backgroundColor');
const zr = this._zr;
return (zr.painter as CanvasPainter).getRenderedCanvas(opts);
}
private _initEvents(): void {each(MOUSE_EVENT_NAMES, (eveName) => {const handler = (e: ElementEvent) => {const ecModel = this.getModel();
const el = e.target;
let params: ECEvent;
const isGlobalOut = eveName === 'globalout';
if (isGlobalOut) {params = {} as ECEvent;
}
else {el && findEventDispatcher(el, (parent) => {const ecData = getECData(parent);
if (ecData && ecData.dataIndex != null) {const dataModel = ecData.dataModel || ecModel.getSeriesByIndex(ecData.seriesIndex);
params = (dataModel && dataModel.getDataParams(ecData.dataIndex, ecData.dataType) || {}) as ECEvent;
return true;
}
// If element has custom eventData of components
else if (ecData.eventData) {params = zrUtil.extend({}, ecData.eventData) as ECEvent;
return true;
}
}, true);
}
if (params) {
let componentType = params.componentType;
let componentIndex = params.componentIndex;
if (componentType === 'markLine'
|| componentType === 'markPoint'
|| componentType === 'markArea'
) {
componentType = 'series';
componentIndex = params.seriesIndex;
}
const model = componentType && componentIndex != null
&& ecModel.getComponent(componentType, componentIndex);
const view = model && this[model.mainType === 'series' ? '_chartsMap' : '_componentsMap'][model.__viewId];
params.event = e;
params.type = eveName;
(this._$eventProcessor as ECEventProcessor).eventInfo = {
targetEl: el,
packedEvent: params,
model: model,
view: view
};
this.trigger(eveName, params);
}
};
(handler as any).zrEventfulCallAtLast = true;
this._zr.on(eveName, handler, this);
});
each(eventActionMap, (actionType, eventType) => {this._messageCenter.on(eventType, function (event) {this.trigger(eventType, event);
}, this);
});
// Extra events
// TODO register?
each(['selectchanged'],
(eventType) => {this._messageCenter.on(eventType, function (event) {this.trigger(eventType, event);
}, this);
}
);
handleLegacySelectEvents(this._messageCenter, this, this._api);
}
dispatchAction(
payload: Payload,
opt?: boolean | {
silent?: boolean,
flush?: boolean | undefined
}
): void {
const silent = opt.silent;
doDispatchAction.call(this, payload, silent);
const flush = opt.flush;
if (flush) {this._zr.flush();
}
else if (flush !== false && env.browser.weChat) {this._throttledZrFlush();
}
flushPendingActions.call(this, silent);
triggerUpdatedEvent.call(this, silent);
}
}ZRender
ZRender 是典型的 MVC 架构，其中 M 为 Storage，次要对数据进行 CRUD 治理；V 为 Painter，对 Canvas 或 SVG 的生命周期及视图进行治理；C 为 Handler，负责事件的交互解决，实现 dom 事件的模仿封装
class ZRender {
// 公共属性
dom: HTMLElement
id: number
storage: Storage
painter: PainterBase
handler: Handler
animation: Animation
// 公有属性
private _sleepAfterStill = 10;
private _stillFrameAccum = 0;
private _needsRefresh = true
private _needsRefreshHover = true
private _darkMode = false;
private _backgroundColor: string | GradientObject | PatternObject;
constructor(id: number, dom: HTMLElement, opts?: ZRenderInitOpt) {opts = opts || {};
/**
* @type {HTMLDomElement}
*/
this.dom = dom;
this.id = id;
const storage = new Storage();
let rendererType = opts.renderer || 'canvas';
// TODO WebGL
if (useVML) {throw new Error('IE8 support has been dropped since 5.0');
}
if (!painterCtors[rendererType]) {
// Use the first registered renderer.
rendererType = zrUtil.keys(painterCtors)[0];
}
if (!painterCtors[rendererType]) {throw new Error(`Renderer '${rendererType}' is not imported. Please import it first.`);
}
opts.useDirtyRect = opts.useDirtyRect == null
? false
: opts.useDirtyRect;
const painter = new painterCtors[rendererType](dom, storage, opts, id);
this.storage = storage;
this.painter = painter;
const handerProxy = (!env.node && !env.worker)
? new HandlerProxy(painter.getViewportRoot(), painter.root)
: null;
this.handler = new Handler(storage, painter, handerProxy, painter.root);
this.animation = new Animation({
stage: {update: () => this._flush(true)
}
});
this.animation.start();}
/**
* 增加元素
*/
add(el: Element) { }
/**
* 删除元素
*/
remove(el: Element) { }
refresh() {
this._needsRefresh = true;
// Active the animation again.
this.animation.start();}
private _flush(fromInside?: boolean) {
let triggerRendered;
const start = new Date().getTime();
if (this._needsRefresh) {
triggerRendered = true;
this.refreshImmediately(fromInside);
}
if (this._needsRefreshHover) {
triggerRendered = true;
this.refreshHoverImmediately();}
const end = new Date().getTime();
if (triggerRendered) {
this._stillFrameAccum = 0;
this.trigger('rendered', {elapsedTime: end - start});
}
else if (this._sleepAfterStill > 0) {
this._stillFrameAccum++;
// Stop the animiation after still for 10 frames.
if (this._stillFrameAccum > this._sleepAfterStill) {this.animation.stop();
}
}
}
on<Ctx>(eventName: string, eventHandler: EventCallback<Ctx, unknown> | EventCallback<Ctx, unknown, ElementEvent>, context?: Ctx): this {this.handler.on(eventName, eventHandler, context);
return this;
}
off(eventName?: string, eventHandler?: EventCallback<unknown, unknown> | EventCallback<unknown, unknown, ElementEvent>) {this.handler.off(eventName, eventHandler);
}
trigger(eventName: string, event?: unknown) {this.handler.trigger(eventName, event);
}
clear() {}
dispose() {}
}G6 源码
G6 是 AntV 专门针对图开源的一个库，其底层通过对边和点的定义，以及对地位的确定，来进行图的绘制，其次要包含五大内容：1、图的元素：点、边、分组等；2、图的算法：DFS、BFS、图检测、最短门路、核心度等；3、图布局：force、circle、grid 等；4、图渲染：Canvas 及 SVG 等；5、图交互：框选、点选、拖拽等；而 Graphin 是基于 G6 的应用 React 封装的落地计划
G6
和 ECharts 的外围思路是统一的，都是基于 MVC 的模型，然而 G6 针对图的特点对元素进行了细化，用御术的话说就是“G6 是面粉，ECharts 是面条”，果然同一个作者开发的思路都是极其的类似
export default abstract class AbstractGraph extends EventEmitter implements IAbstractGraph {
protected animating: boolean;
protected cfg: GraphOptions & {[key: string]: any };
protected undoStack: Stack;
protected redoStack: Stack;
public destroyed: boolean;
constructor(cfg: GraphOptions) {super();
this.cfg = deepMix(this.getDefaultCfg(), cfg);
this.init();
this.animating = false;
this.destroyed = false;
if (this.cfg.enabledStack) {this.undoStack = new Stack(this.cfg.maxStep);
this.redoStack = new Stack(this.cfg.maxStep);
}
}
protected init() {this.initCanvas();
const viewController = new ViewController(this);
const modeController = new ModeController(this);
const itemController = new ItemController(this);
const stateController = new StateController(this);
this.set({
viewController,
modeController,
itemController,
stateController,
});
this.initLayoutController();
this.initEventController();
this.initGroups();
this.initPlugins();}
protected abstract initLayoutController(): void;
protected abstract initEventController(): void;
protected abstract initCanvas(): void;
protected abstract initPlugins(): void;
protected initGroups(): void {const canvas: ICanvas = this.get('canvas');
const el: HTMLElement = this.get('canvas').get('el');
const {id} = el;
const group: IGroup = canvas.addGroup({id: `${id}-root`,
className: Global.rootContainerClassName,
});
if (this.get('groupByTypes')) {
const edgeGroup: IGroup = group.addGroup({id: `${id}-edge`,
className: Global.edgeContainerClassName,
});
const nodeGroup: IGroup = group.addGroup({id: `${id}-node`,
className: Global.nodeContainerClassName,
});
const comboGroup: IGroup = group.addGroup({id: `${id}-combo`,
className: Global.comboContainerClassName,
});
// 用于存储自定义的群组
comboGroup.toBack();
this.set({nodeGroup, edgeGroup, comboGroup});
}
const delegateGroup: IGroup = group.addGroup({id: `${id}-delegate`,
className: Global.delegateContainerClassName,
});
this.set({delegateGroup});
this.set('group', group);
}
public node(nodeFn: (config: NodeConfig) => Partial<NodeConfig>): void {if (typeof nodeFn === 'function') {this.set('nodeMapper', nodeFn);
}
}
public edge(edgeFn: (config: EdgeConfig) => Partial<EdgeConfig>): void {if (typeof edgeFn === 'function') {this.set('edgeMapper', edgeFn);
}
}
public combo(comboFn: (config: ComboConfig) => Partial<ComboConfig>): void {if (typeof comboFn === 'function') {this.set('comboMapper', comboFn);
}
}
public addBehaviors(behaviors: string | ModeOption | ModeType[],
modes: string | string[],): AbstractGraph {const modeController: ModeController = this.get('modeController');
modeController.manipulateBehaviors(behaviors, modes, true);
return this;
}
public removeBehaviors(behaviors: string | ModeOption | ModeType[],
modes: string | string[],): AbstractGraph {const modeController: ModeController = this.get('modeController');
modeController.manipulateBehaviors(behaviors, modes, false);
return this;
}
public paint(): void {this.emit('beforepaint');
this.get('canvas').draw();
this.emit('afterpaint');
}
public render(): void {
const self = this;
this.set('comboSorted', false);
const data: GraphData = this.get('data');
if (this.get('enabledStack')) {
// render 之前清空 redo 和 undo 栈
this.clearStack();}
if (!data) {throw new Error('data must be defined first');
}
const {nodes = [], edges = [], combos = [] } = data;
this.clear();
this.emit('beforerender');
each(nodes, (node: NodeConfig) => {self.add('node', node, false, false);
});
// process the data to tree structure
if (combos && combos.length !== 0) {const comboTrees = plainCombosToTrees(combos, nodes);
this.set('comboTrees', comboTrees);
// add combos
self.addCombos(combos);
}
each(edges, (edge: EdgeConfig) => {self.add('edge', edge, false, false);
});
const animate = self.get('animate');
if (self.get('fitView') || self.get('fitCenter')) {self.set('animate', false);
}
// layout
const layoutController = self.get('layoutController');
if (layoutController) {layoutController.layout(success);
if (this.destroyed) return;
} else {if (self.get('fitView')) {self.fitView();
}
if (self.get('fitCenter')) {self.fitCenter();
}
self.emit('afterrender');
self.set('animate', animate);
}
// 将在 onLayoutEnd 中被调用
function success() {
// fitView 与 fitCenter 共存时，fitView 优先，fitCenter 不再执行
if (self.get('fitView')) {self.fitView();
} else if (self.get('fitCenter')) {self.fitCenter();
}
self.autoPaint();
self.emit('afterrender');
if (self.get('fitView') || self.get('fitCenter')) {self.set('animate', animate);
}
}
if (!this.get('groupByTypes')) {if (combos && combos.length !== 0) {this.sortCombos();
} else {
// 为晋升性能，抉择数量少的进行操作
if (data.nodes && data.edges && data.nodes.length < data.edges.length) {const nodesArr = this.getNodes();
// 遍历节点实例，将所有节点提前。nodesArr.forEach((node) => {node.toFront();
});
} else {const edgesArr = this.getEdges();
// 遍历节点实例，将所有节点提前。edgesArr.forEach((edge) => {edge.toBack();
});
}
}
}
if (this.get('enabledStack')) {this.pushStack('render');
}
}
}Graphin
Graphin 是基于 G6 封装的 React 组件，能够间接进行应用
import React, {ErrorInfo} from 'react';
import G6, {Graph as IGraph, GraphOptions, GraphData, TreeGraphData} from '@antv/g6';
class Graphin extends React.PureComponent<GraphinProps, GraphinState> {static registerNode: RegisterFunction = (nodeName, options, extendedNodeName) => {G6.registerNode(nodeName, options, extendedNodeName);
};
static registerEdge: RegisterFunction = (edgeName, options, extendedEdgeName) => {G6.registerEdge(edgeName, options, extendedEdgeName);
};
static registerCombo: RegisterFunction = (comboName, options, extendedComboName) => {G6.registerCombo(comboName, options, extendedComboName);
};
static registerBehavior(behaviorName: string, behavior: any) {G6.registerBehavior(behaviorName, behavior);
}
static registerFontFamily(iconLoader: IconLoader): {[icon: string]: any } {
/** 注册 font icon */
const iconFont = iconLoader();
const {glyphs, fontFamily} = iconFont;
const icons = glyphs.map((item) => {
return {
name: item.name,
unicode: String.fromCodePoint(item.unicode_decimal),
};
});
return new Proxy(icons, {get: (target, propKey: string) => {const matchIcon = target.find((icon) => {return icon.name === propKey;});
if (!matchIcon) {console.error(`%c fontFamily:${fontFamily},does not found ${propKey} icon`);
return '';
}
return matchIcon?.unicode;
},
});
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
static registerLayout(layoutName: string, layout: any) {G6.registerLayout(layoutName, layout);
}
graphDOM: HTMLDivElement | null = null;
graph: IGraph;
layout: LayoutController;
width: number;
height: number;
isTree: boolean;
data: GraphinTreeData | GraphinData | undefined;
options: GraphOptions;
apis: ApisType;
theme: ThemeData;
constructor(props: GraphinProps) {super(props);
const {
data,
layout,
width,
height,
...otherOptions
} = props;
this.data = data;
this.isTree =
Boolean(props.data && props.data.children) || TREE_LAYOUTS.indexOf(String(layout && layout.type)) !== -1;
this.graph = {} as IGraph;
this.height = Number(height);
this.width = Number(width);
this.theme = {} as ThemeData;
this.apis = {} as ApisType;
this.state = {
isReady: false,
context: {
graph: this.graph,
apis: this.apis,
theme: this.theme,
},
};
this.options = {...otherOptions} as GraphOptions;
this.layout = {} as LayoutController;}
initData = (data: GraphinProps['data']) => {if (data.children) {this.isTree = true;}
console.time('clone data');
this.data = cloneDeep(data);
console.timeEnd('clone data');
};
initGraphInstance = () => {
const {
theme,
data,
layout,
width,
height,
defaultCombo,
defaultEdge,
defaultNode,
nodeStateStyles,
edgeStateStyles,
comboStateStyles,
modes = {default: [] },
animate,
...otherOptions
} = this.props;
const {clientWidth, clientHeight} = this.graphDOM as HTMLDivElement;
this.initData(data);
this.width = Number(width) || clientWidth || 500;
this.height = Number(height) || clientHeight || 500;
const themeResult = getDefaultStyleByTheme(theme);
const {
defaultNodeStyle,
defaultEdgeStyle,
defaultComboStyle,
defaultNodeStatusStyle,
defaultEdgeStatusStyle,
defaultComboStatusStyle,
} = themeResult;
this.theme = themeResult as ThemeData;
this.isTree = Boolean(data.children) || TREE_LAYOUTS.indexOf(String(layout && layout.type)) !== -1;
const isGraphinNodeType = defaultNode?.type === undefined || defaultNode?.type === defaultNodeStyle.type;
const isGraphinEdgeType = defaultEdge?.type === undefined || defaultEdge?.type === defaultEdgeStyle.type;
this.options = {
container: this.graphDOM,
renderer: 'canvas',
width: this.width,
height: this.height,
animate: animate !== false,
/** 默认款式 */
defaultNode: isGraphinNodeType ? deepMix({}, defaultNodeStyle, defaultNode) : defaultNode,
defaultEdge: isGraphinEdgeType ? deepMix({}, defaultEdgeStyle, defaultEdge) : defaultEdge,
defaultCombo: deepMix({}, defaultComboStyle, defaultCombo),
/** status 款式 */
nodeStateStyles: deepMix({}, defaultNodeStatusStyle, nodeStateStyles),
edgeStateStyles: deepMix({}, defaultEdgeStatusStyle, edgeStateStyles),
comboStateStyles: deepMix({}, defaultComboStatusStyle, comboStateStyles),
modes,
...otherOptions,
} as GraphOptions;
if (this.isTree) {this.options.layout = { ...layout};
this.graph = new G6.TreeGraph(this.options);
} else {this.graph = new G6.Graph(this.options);
}
this.graph.data(this.data as GraphData | TreeGraphData);
/** 初始化布局 */
if (!this.isTree) {this.layout = new LayoutController(this);
this.layout.start();}
this.graph.get('canvas').set('localRefresh', false);
this.graph.render();
this.initStatus();
this.apis = ApiController(this.graph);
};
updateLayout = () => {this.layout.changeLayout();
};
componentDidMount() {console.log('did mount...');
this.initGraphInstance();
this.setState({
isReady: true,
context: {
graph: this.graph,
apis: this.apis,
theme: this.theme,
},
});
}
updateOptions = () => {const { layout, data, ...options} = this.props;
return options;
};
initStatus = () => {if (!this.isTree) {const { data} = this.props;
const {nodes = [], edges = []} = data as GraphinData;
nodes.forEach((node) => {const { status} = node;
if (status) {Object.keys(status).forEach((k) => {this.graph.setItemState(node.id, k, Boolean(status[k]));
});
}
});
edges.forEach((edge) => {const { status} = edge;
if (status) {Object.keys(status).forEach((k) => {this.graph.setItemState(edge.id, k, Boolean(status[k]));
});
}
});
}
};
componentDidUpdate(prevProps: GraphinProps) {console.time('did-update');
const isDataChange = this.shouldUpdate(prevProps, 'data');
const isLayoutChange = this.shouldUpdate(prevProps, 'layout');
const isOptionsChange = this.shouldUpdate(prevProps, 'options');
const isThemeChange = this.shouldUpdate(prevProps, 'theme');
console.timeEnd('did-update');
const {data} = this.props;
const isGraphTypeChange = prevProps.data.children !== data.children;
/** 图类型变动 */
if (isGraphTypeChange) {this.initGraphInstance();
console.log('%c isGraphTypeChange', 'color:grey');
}
/** 配置变动 */
if (isOptionsChange) {this.updateOptions();
console.log('isOptionsChange');
}
/** 数据变动 */
if (isDataChange) {this.initData(data);
this.layout.changeLayout();
this.graph.data(this.data as GraphData | TreeGraphData);
this.graph.changeData(this.data as GraphData | TreeGraphData);
this.initStatus();
this.apis = ApiController(this.graph);
console.log('%c isDataChange', 'color:grey');
this.setState((preState) => {
return {
...preState,
context: {
graph: this.graph,
apis: this.apis,
theme: this.theme,
},
};
});
return;
}
/** 布局变动 */
if (isLayoutChange) {
/**
* TODO
* 1. preset 前置布局判断问题
* 2. enablework 问题
* 3. G6 LayoutController 里的逻辑
*/
this.layout.changeLayout();
this.layout.refreshPosition();
/** 走 G6 的 layoutController */
// this.graph.updateLayout();
console.log('%c isLayoutChange', 'color:grey');
}
}
/**
* 组件移除的时候
*/
componentWillUnmount() {this.clear();
}
/**
* 组件解体的时候
* @param error
* @param info
*/
componentDidCatch(error: Error, info: ErrorInfo) {console.error('Catch component error:', error, info);
}
clear = () => {if (this.layout && this.layout.destroyed) {this.layout.destroy(); // tree graph
}
this.layout = {} as LayoutController;
this.graph!.clear();
this.data = {nodes: [], edges: [], combos: [] };
this.graph!.destroy();};
shouldUpdate(prevProps: GraphinProps, key: string) {
/* eslint-disable react/destructuring-assignment */
const prevVal = prevProps[key];
const currentVal = this.props[key] as DiffValue;
const isEqual = deepEqual(prevVal, currentVal);
return !isEqual;
}
render() {const { isReady} = this.state;
const {modes, style} = this.props;
return (<GraphinContext.Provider value={this.state.context}>
<div id="graphin-container">
<div
data-testid="custom-element"
className="graphin-core"
ref={(node) => {this.graphDOM = node;}}
style={{background: this.theme?.background, ...style}}
/>
<div className="graphin-components">
{isReady && (
<>
{
/** modes 不存在的时候，才启动默认的 behaviros，否则会笼罩用户本人传入的 */
!modes && (
<React.Fragment>
{/* 拖拽画布 */}
<DragCanvas />
{/* 缩放画布 */}
<ZoomCanvas />
{/* 拖拽节点 */}
<DragNode />
{/* 点击节点 */}
<DragCombo />
{/* 点击节点 */}
<ClickSelect />
{/* 圈选节点 */}
<BrushSelect />
</React.Fragment>
)
}
{/** resize 画布 */}
<ResizeCanvas graphDOM={this.graphDOM as HTMLDivElement} />
<Hoverable bindType="node" />
{/* <Hoverable bindType="edge" /> */}
{this.props.children}
</>
)}
</div>
</div>
</GraphinContext.Provider>
);
}
}总结
数据可视化通常是基于 Canvas 进行渲染的，对于简略的图形渲染，咱们经常一个实例一个实例去写，短少系统性的统筹规划的概念，对于须要解决一类问题的可视化计划，能够借鉴 ECharts 及 G6 引擎的做法，基于 MVC 模型，将展现、行为及数据进行拆散，对于特定计划细粒度的把控能够参考 G6 的计划。实质上，大数据可视化展现是一个兼具大数据、视觉传播、前端等多方穿插的畛域，对于怎么进行数据粒度的柔美展现，能够借鉴 data-ink ratio 以及利用力导布局的算法（ps：引入库伦斥力及胡克弹力阻尼衰减进行动效展现，同时配合边线权重进行节点聚合），对于这方面感兴趣的同学，能够参考往年 SEE Conf 的《图解万物——AntV 图可视化剖析解决方案》，数据可视化畛域既业余又穿插，对于深挖此道的同学还是须要下一番功夫的。
参考
- ECharts 关系图官网
- ECharts 官网源码
- ECharts 3.0 源码简要剖析 1 - 总体架构
- ZRender 官网源码
- ZRender 源码剖析 1：总体构造
- ZRender 源码剖析 2：Storage(Model 层)
- ZRender 源码剖析 3：Painter(View 层)- 上
- ZRender 源码剖析 4：Painter(View 层)- 中
- ZRender 源码剖析 5：Shape 绘图详解
- ZRender 源码剖析 6：Shape 对象详解之门路
- G6 官网
- G6 官网源码
- G6 源码浏览 -part1- 运行主流程
- G6 源码浏览 -Part2-Item 与 Shape
- G6 源码浏览 -Part3- 绘制 Paint
- Graphin 官网源码
- Graphin 官网