If you don’t want to get into the details, just look at the best way to use it, and skip to the end of the article.
AntV G6 is a simple, easy to use, complete graph visualization engine, which provides a series of elegant design, easy to use graph visualization solutions based on high customization capabilities. It can help developers build their own graph visualization, graph analysis, or graph editor applications.
The effect
In our business, useAntV G6To develop the need for diagrams, but in some complex business requirements, you may want to show the distribution of data in nodes, which requires G6 nodes to support basic statistical diagrams.
The problem
In order to improve performance, we use G6 canvas rendering method, but using Canvas rendering time point does not support DOM.
G6 greatly improved its performance has so far, you can refer to their website the Demo, the amount of data in 20000 cases can be smooth interaction: G6. Antv. Vision/useful/examples…
thinking
The bottom rendering of G6 is based on G, and AntV G2 is also based on G rendering, so can we embed the chart of G2 into G6 nodes?
Following this idea, we find that G2 supports the group of G as a container in view, Shape, geometry, etc. At this time, we can reuse the group of G6.
implementation
Step 1: Introduce the necessary Geometry and components
In G2, the Geometry of the bar graph is Interval, and the Geometry of the Line graph is Line. In addition, there are circles on the Line, and the Geometry Point is used. Therefore, We need to introduce Interval, Line, and Point, as well as the X-axis to display the names of each category, and the Axis component.
import Line from '@antv/g2/lib/geometry/line';
import Point from '@antv/g2/lib/geometry/point';
import Axis from "@antv/g2/lib/chart/controller/axis";
import Interval from "@antv/g2/lib/geometry/interval";
Copy the codeStep 2: Register Geometry and Component
Since we do not directly use Chart of G2, but realize the bar Chart based on View, we need to register the corresponding Geometry and Component first, as shown below:
import { registerGeometry } from '@antv/g2/lib/chart/view';
import { registerComponentController } from '@antv/g2/lib/core';
registerGeometry("Line", Line);
registerGeometry("Point", Point);
registerGeometry("Interval", Interval);
registerComponentController("axis", Axis);
Copy the codeStep 3: Instantiate the View
Since we are instantiating the View while we are customizing the G6 node, we can use the GROUP in G6 as a container for the View.
const canvas = group.get('canvas')
const backgroundGroup = group.addGroup();
const middleGroup = group.addGroup();
const foregroundGroup = group.addGroup();
const view = new View({
parent: null,
canvas,
foregroundGroup,
middleGroup,
backgroundGroup,
padding: 5.visible: true.region: {
start: {
x: 0.01.y: 0.2
},
end: {
x: 0.8.y: 0.35}}}); view.data(cfg.trendData); view .point() .position('Month * Monthly Mean Rainfall')
.color('name');
view
.line()
.position("Monthly * Monthly Average Rainfall")
.color("name")
.shape('dash');
view
.interval()
.position("Monthly * Monthly Average Rainfall")
.color("name")
.adjust([
{
type: 'dodge'.marginRatio: 0,}]); view.legend(false);
view.axis('Mean monthly rainfall'.false)
view.render();
Copy the codeThe following points need to be noted in this step:
- Region Controls the display range of the bar chart. The values of x and y are in the range of [0-1].
- The values of x and y in region are determined by the width and height of the canvas, not the width and height of the keyShape node.
Step 4: Customize the node
After completing the first three steps, it is relatively easy to customize a node with a bar graph, as described in G6.
G6.registerNode('node-with-multchart', {
draw(cfg, group) {
const canvas = group.get('canvas')
const keyShape = group.addShape('rect', {
attrs: {
x: 0.y: 0.width: 400.height: 200.fill: cfg.style.fill
}
})
group.addShape('rect', {
attrs: {
x: 0.y: 0.width: 400.height: 40.fill: '#69c0ff'
}
})
group.addShape('text', {
attrs: {
text: 'Browse Application Completion Rate'.x: 10.y:25.fontSize: 14.fill: '#fff'
}
})
group.addShape('text', {
attrs: {
text: 'average 2020-06-07 ~ 2020-06-07 |'.x: 20.y: 70.fontSize: 13.fill: '#8c8c8c'
}
})
group.addShape('text', {
attrs: {
text: '8.8%'.x: 20.y: 110.fontSize: 30.fill: '# 000'}})const backgroundGroup = group.addGroup();
const middleGroup = group.addGroup();
const foregroundGroup = group.addGroup();
const view = new View({
parent: null,
canvas,
foregroundGroup,
middleGroup,
backgroundGroup,
padding: 5.visible: true.region: {
start: {
x: 0.01.y: 0.2
},
end: {
x: 0.8.y: 0.35}}}); view.data(cfg.trendData); view .point() .position('Month * Monthly Mean Rainfall')
.color('name');
view
.line()
.position("Monthly * Monthly Average Rainfall")
.color("name")
.shape('dash');
view
.interval()
.position("Monthly * Monthly Average Rainfall")
.color("name")
.adjust([
{
type: 'dodge'.marginRatio: 0,}]); view.legend(false);
view.axis('Mean monthly rainfall'.false)
view.render();
return keyShape
},
update: null
}, 'single-node')
Copy the codeNote the following points in this step:
- Use the bar chart as part of a node, not as a keyShape;
- It is recommended to inherit the G6 built-in Single-Node so that you can use the state management capabilities in G6;
- There are two ways to update a node:
- Set the update method to null or undefined so that the draw method is redrawn each time;
- Update method, update method in the call view changeData to update data, so you need to draw when the view object stored down, the specific implementation is as follows:
G6.registerNode('node-with-interval', {
draw(cfg, group) {
const canvas = group.get('canvas')
const keyShape = group.addShape('rect', {
attrs: {
x: 0.y: 0.width: 400.height: 200.fill: cfg.style.fill
}
})
const view = new View({
// ...
});
view.render();
// Store view objects for use in update
keyShape.set('intervalView', view)
return keyShape
},
update(cfg, item) {
const keyShape = item.getKeyShape()
const view = keyShape.get('intervalView')
view.changeData(cfg.trendData)
// keyShape and other parts are updated in exactly the same way as normal G6 nodes}},'single-node')
Copy the codeuse
If a node named node-with-interval is defined in G6 custom node mode, it will be used in the same way as other common nodes such as circle and rect. It can be specified in the type field of defaultNode when instantiating Graph. It can also be specified in the data through the Type field.
const graph = new G6.Graph({
// Omit other configurations......
defaultNode: {
type: 'node-with-interval'}});Copy the codeUsing the above way can make G6 nodes support G2 chart, but the implementation is too complicated, we need to have a certain understanding of THE source code of G2, especially unfriendly for business development students. Is there an easier way?
We found that after the release of G6 version 3.7.0, there are several cases of custom nodes on the official website. Click on it to see, and you are shocked! It is the case that supports line chart, bar chart, pie chart, etc., which is exactly what we introduced above.
The best implementation
In order to make it easier for business developers to support graphs in nodes, AntV G6 officially provides the @ANTv/chart-Node-g6 package. With this package, we no longer need to worry about details in G2.
import G6 from '@antv/g6'; import Chart from '@antv/chart-node-g6'; G6.registerNode( 'node-with-interval', { draw(cfg, group) { const keyShape = group.addShape('rect', { attrs: { x: 0, y: 0, width: 400, height: 200, fill: cfg.style.fill, }, }); const view = new Chart({ group, padding: 1, width: 360, height: 70, x: 20, y: 100 }); view.data(cfg.trendData); view.interval().position('genre*sold').color('genre'); view.legend('genre', false); View. scale({genre: {alias: 'game type ', // column definition, define the alias to display the property}, sold: {alias:' sales ',},}); view.axis('sold', false); // view. Coordinate ('polar'); view.render(); keyShape.set('intervalView', view); return keyShape; }, update(cfg, item) { const keyShape = item.getKeyShape(); const view = keyShape.get('intervalView'); view.changeData(cfg.trendData); }, }, 'single-node', );Copy the codeThe specific effect is shown below:
For more examples, please refer to AntV G6 official website.
AntV G6 is an open source graph visualization engine that focuses on graph visualization and graph analysis. Star G6 GitHub: github.com/antvis/G6 official website: g6.antv.vision/zh/
🏆 technology project phase iii | data visualization of those things…