What is a tree diagram?
Tree diagram, represented as follows,
Specific principle can refer toEmr.cs.iit.edu/~reingold/t…, the root node is constantly derived to form a tree structure, which is a visualization method that can well express the hierarchical relationship. Here’s an example:
In what scenario
| The name of the | application |
|---|---|
| Decomposition tree | In a census, the breakdown of a population sample into demographic information |
| Key quality characteristics tree | Translate customer requirements into measurable product parameters and process characteristics |
| Decision tree or logic diagram | Map the thought process to facilitate decision making |
| Tree diagram | Used to identify product features during the design and development phase of the product |
| Fault tree analysis | Identify the potential cause of the fault |
| Assembly drawing | Describe the assembly of product components during manufacturing |
| Method – Method diagram | To solve the problem |
| Job or task analysis | Identify the requirements of a job or task |
| Organization chart | Identify the level of correlation between management and reporting |
| Process decision procedure diagram | Identify potential problems and countermeasures in complex plans |
| Demand measurement tree | Identify customers, needs, and measurements of the measured product or service |
| Reason one Reason chart or Five Whys | Identify the root cause of the problem |
| Production Classification Structure (WBS) | Identify all aspects of the project and break them down into specific work package levels |
The visible tree graph has many applications in practical scenarios, whether in daily life or in production. The most familiar mind map is also a form of tree,
How to draw in F6
Demo sample can reference f6. Antv. Vision/useful/docs/exa… This section of the code has been open source, interested can view
- Pay treasure github.com/antvis/F6/t…
- WeChat github.com/antvis/F6/t…
In the pay treasure
First installation
npm install @antv/f6 @antv/f6-alipay -S
Copy the code
index.json
{
"defaultTitle": "Compact tree"."usingComponents": {
"f6-canvas": "@antv/f6-alipay/es/container/container"}}Copy the codeindex.js
import F6 from '@antv/f6';
import TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';
import data from './data.js';
/** * compact tree */
Page({
canvas: null.ctx: null.// Delay fetching the 2D context
renderer: ' '.// Mini, Mini-native, etc., F6 need, mark the environment
isCanvasInit: false.// Is the canvas ready
graph: null.data: {
width: 375.height: 600.pixelRatio: 2.forceMini: false,},onLoad() {
// Register custom trees, nodes, etc
F6.registerGraph('TreeGraph', TreeGraph);
// Synchronize the width and height of the window
const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
pixelRatio,
});
},
/** * Initializes the canvas callback, caching the obtained context *@param {*} CTX plotting context *@param {*} Rect width and height information *@param {*} Canvas Canvas object, null * when render is mini@param {*} 1.0, 2.0 or canvas the renderer to use canvas mini | mini - native * /
handleInit(ctx, rect, canvas, renderer) {
this.isCanvasInit = true;
this.ctx = ctx;
this.renderer = renderer;
this.canvas = canvas;
this.updateChart();
},
/** * Canvas dispatches events to graph instance */
handleTouch(e) {
this.graph && this.graph.emitEvent(e);
},
updateChart() {
const { width, height, pixelRatio } = this.data;
// Create an F6 instance
this.graph = new F6.TreeGraph({
context: this.ctx,
renderer: this.renderer,
width,
height,
pixelRatio,
fitView: true.modes: {
default: [{type: 'collapse-expand'.onChange: function onChange(item, collapsed) {
const model = item.getModel();
model.collapsed = collapsed;
return true; }},'drag-canvas'.'zoom-canvas',]},defaultNode: {
size: 26.anchorPoints: [[0.0.5],
[1.0.5]],},defaultEdge: {
type: 'cubic-horizontal',},layout: {
type: 'compactBox'.direction: 'LR'.getId: function getId(d) {
return d.id;
},
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 100; ,}}});this.graph.node(function(node) {
return {
label: node.id,
labelCfg: {
offset: 10.position: node.children && node.children.length > 0 ? 'left' : 'right',}}; });this.graph.data(data);
this.graph.render();
this.graph.fitView(); }});Copy the codeindex.axml
<f6-canvas
width="{{width}}"
height="{{height}}"
forceMini="{{forceMini}}"
pixelRatio="{{pixelRatio}}"
onTouchEvent="handleTouch"
onInit="handleInit"
></f6-canvas>
Copy the codeIn the WeChat
First installation
npm install @antv/f6-wx -S
Copy the codeSince wechat is not very friendly to NPM package, we packaged @ANTV/F6-wx to help users simplify operations.
index.json
{
"defaultTitle": "Compact tree"."usingComponents": {
"f6-canvas": "@antv/f6-wx/canvas/canvas"}}Copy the codeindex.wxml
<f6-canvas
width="{{width}}"
height="{{height}}"
forceMini="{{forceMini}}"
pixelRatio="{{pixelRatio}}"
bind:onTouchEvent="handleTouch"
bind:onInit="handleInit"
></f6-canvas>
Copy the codeindex.js
import F6 from '@antv/f6-wx';
import TreeGraph from '@antv/f6-wx/extends/graph/treeGraph';
import data from './data.js';
Page({
canvas: null.ctx: null.// Delay fetching the 2D context
renderer: ' '.// Mini, Mini-native, etc., F6 need, mark the environment
isCanvasInit: false.// Is the canvas ready
graph: null.data: {
width: 375.height: 600.pixelRatio: 2.forceMini: false,},onLoad() {
// Register custom trees, nodes, etc
F6.registerGraph('TreeGraph', TreeGraph);
// Synchronize the width and height of the window
const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();
this.setData({
width: windowWidth * pixelRatio,
height: windowHeight * pixelRatio,
pixelRatio,
});
},
/** * Initializes the canvas callback, caching the obtained context *@param {*} CTX plotting context *@param {*} Rect width and height information *@param {*} Canvas Canvas object, null * when render is mini@param {*} 1.0, 2.0 or canvas the renderer to use canvas mini | mini - native * /
handleInit(event) {
const { ctx, rect, canvas, renderer } = event.detail;
this.isCanvasInit = true;
this.ctx = ctx;
this.renderer = renderer;
this.canvas = canvas;
this.updateChart();
},
/** * Canvas dispatches events to graph instance */
handleTouch(e) {
this.graph && this.graph.emitEvent(e.detail);
},
updateChart() {
const { width, height, pixelRatio } = this.data;
// Create an F6 instance
this.graph = new F6.TreeGraph({
context: this.ctx,
renderer: this.renderer,
width,
height,
pixelRatio,
fitView: true.modes: {
default: [{type: 'collapse-expand'.// Click to expand/shrink
onChange: function onChange(item, collapsed) {
const model = item.getModel();
model.collapsed = collapsed;
return true; }},'drag-canvas'.'zoom-canvas',]},defaultNode: {
size: 26.anchorPoints: [[0.0.5],
[1.0.5]],},defaultEdge: {
type: 'cubic-horizontal',},layout: {
type: 'compactBox'.direction: 'LR'.getId: function getId(d) {
return d.id;
},
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 100; ,}}});this.graph.node(function(node) {
return {
label: node.id,
labelCfg: {
offset: 10.position: node.children && node.children.length > 0 ? 'left' : 'right',}}; });this.graph.data(data);
this.graph.render();
this.graph.fitView(); }});Copy the codeReview the main points
- Understand the concepts of the F6 TreeGraph F6. Antv. Vision/useful/docs/API…
- Wechat and Alipay mini programs will have some differences
Welcome to discuss
If you are interested in tree graphs, or graph visualization, you can join our nail group for discussion, or add my wechat Openwayne to our wechat group.
