Visualization engine antv series (1)

Overview

Five years ago, I was exposed to a little visual development. Because I wanted to make user portraits, I chose Baidu's echarts naturally. It felt cool, easy to use, and pure configuration writing. At that time, the available visualization engines were probably echarts, d3, hightcharts, etc. Compared with echarts, echarts has the most comprehensive documentation, the easiest to use, and the most powerful. However, it is about the level of using the api, and there is no such thing, and I feel that the things I make are still beautiful and beautiful.

After 5 years, I started to be exposed to visualization again, and found that there were more new choices, and the times were changing. This time I'm full of Alibaba's open source antv series.

Why is antv?

Because it is really good-looking, our designers also like it.
Aha.
Because its profile is very well written

G2 is a set of underlying visualization engines based on the theory of graphic grammar. It is data-driven and provides graphic grammar and interactive grammar, with a high degree of ease of use and scalability.
I don't understand what I'm talking about. . .
Well, there is a taste of life beauty and philosophy, and a lot of terms and concepts have been adjusted.
Oh, it turns out that visualization is not only about rendering, but also the underlying theoretical support?
What's more attractive than new things

File system

When I first came into contact with this, the document looked perfect and the layout was very clear.
But it’s hard to understand it. You have to read it at least 3 times. There are a lot of terms and concepts.
When you think you know something to develop, you will find that the documentation is very imperfect. . .
Many things have not been documented and need to be found in the source code, and the community is not very complete.

antv family

A very complete set of solutions.

React technology stack series

From bottom to top, the technical architecture chain is as follows:
G ---> G2 ---> G2Plot ---> Ant Design Charts
Of course, there are other libraries at the bottom of the G drawing engine.
From top to bottom, we first do a general technical analysis and have a basic understanding of the entire technical architecture.

Ant Design Charts

This is very simple, that is, a React version is encapsulated for G2Plot, a hook of useChart is commonly used, and the properties are transparently transmitted through props.
The advantages are as follows:

Further encapsulated the G2Plot api, weakening the underlying logic
Expanded some additional capabilities

const PieChart = forwardRef((props: PieConfig, ref) => {
  const {
    chartRef,
    style = {
      height: 'inherit',
    },
    className,
    loading,
    loadingTemplate,
    errorTemplate,
    ...rest
  } = props;
  const { chart, container } = useChart<G2plotPie, PieConfig>(G2plotPie, rest);
  useEffect(() => {
    getChart(chartRef, chart.current);
  }, [chart.current]);
  useImperativeHandle(ref, () => ({
    getChart: () => chart.current,
  }));
  return (
    <ErrorBoundary errorTemplate={errorTemplate}>
      {loading && <ChartLoading loadingTemplate={loadingTemplate} />}
      <div className={className} style={style} ref={container} />
    </ErrorBoundary>
  );
});

export default PieChart;

Then instantiate the G2Plot instance after the component is initialized, and the others do an event delivery work.

 useEffect(() => {
    if (!container.current) {
      return () => null;
    }
    processConfig();
    const chartInstance: T = new (ChartClass as any)(container.current, {
      ...config,
    });
 }, [])

Of course, if there are places that do not meet the requirements and need to operate the G2Plot instance, you can still obtain the g2plot instance through ref and other methods, and directly call its properties and methods.

G2Plot

G2 itself is a declarative grammar, which is still a bit trivial to use. G2Plot encapsulates the command grammar of G2 and is used in a configuration mode, which greatly simplifies the cost of getting started. The essence is to convert json configuration into G2 command syntax.

G2Plot's technical implementation architecture is particularly good, the logic is clear, the level is very clear, and the versatility is extremely high.

All graphics classes inherit from the base base class.
The code is as follows: very simple, get the parameter configuration, instantiate G2, and bind the event.

Then look at the package of a graphics class, such as a histogram:

Quite simple, other graphics are basically in this mode, and the core only needs to implement two points:

Parameter configuration
adapter
Parameter configuration is nothing to talk about, the core look at the adapter:

The flow here is essentially an aggregation operation similar to a higher-order function reduce, and the core logic is the combination of functional programming. The essence is to stream the parameter options and instance chart to call the api of each link of the conversion.

G2

G2 is also more interesting. It relies on the underlying drawing engine G, so it also hides the drawing api command and does a parameter conversion operation.

/**
 * Chart 类，是使用 G2 进行绘图的入口。
 */
export default class Chart extends View {}

/**
 * G2 视图 View 类
 */
export class View extends Base {}

/**
 * G2 Chart、View、Geometry 以及 Element 等的基类，提供事件以及一些通用的方法。
 */
export default class Base extends EE {}

EE 就是一个发布订阅的事件类

Looking at the inheritance logic above, it has clearly expressed what each class handles. This needs to understand the concept of the view container layer, and I will explain it in detail later.

Then look down, the more interesting public method api.

Look carefully at the call of these methods, only the set operation of options is carried out, and then there is no more.
Seeing this, I will be wondering, where exactly does G2 draw the interface? We look at the render function:

This method performs real recursive drawing, internally calls the G engine, and each component maintains its own drawing. The details will be discussed later.

At this point, a doubt arises. Since the render function needs to be called to draw, how does the interactive action not call render to achieve interface redrawing?

Interactive drawing timing

Before looking for the answer, I thought about it a bit and thought it was controlled by a loop mechanism, because I used to do game development in this mode.
The result was only half of the correct guess. The implementation of the G engine was really witty, and it took a long time to find it, as follows:

The monitor mode is used to start the frame rate drawing instead of the main loop in the traditional sense, which is a great improvement in performance.
Partial rendering is also involved, and the logic is quite complicated.
The magic of this application, introspection and experience.
See you next time!