마인드맵이란 무엇인가요? 미니프로그램으로 마인드맵을 그리는 방법은? 다음 글에서는 F6을 사용하여 작은 프로그램에서 마인드맵을 그리는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!
마인드 맵(영어: 마인드 맵), 브레인 맵, 마인드 맵, 브레인스토밍 맵, 마인드 맵, 영감 트리거 맵, 개념 맵 또는 이라고도 함 Thinking Map은 이미지를 이용해 정보를 정리한 다이어그램입니다. 중심 키워드나 아이디어를 활용하여 모든 대표 단어, 아이디어, 업무, 기타 관련 항목을 방사선으로 연결합니다. 인용형, 시각적 시각화형, 구축 시스템형, 분류형 등 다양한 방법을 사용하여 사람들의 생각을 표현할 수 있습니다. 이는 연구, 조직, 문제 해결 및 정책 수립에 일반적으로 사용됩니다. "Wikipedia"
마인드맵은 1970년대 영국의 Tony Buzan이 제안한 보조적 사고 도구입니다. 대상 주제를 중심 노드로 관계를 지속적으로 외부로 확장, 분해, 탐색하여 최종적으로 완전한 수형도가 형성됩니다. 구체적인 운영 과정의 관점에서 보면, 각 연관의 결과를 완벽하게 기록하는 탐색 과정을 시각화한 것으로도 이해할 수 있다. 이 형태는 사람들의 사고방식과 더 일치하며, 최종 그림은 또한 주제에 대한 더 물리적이고 전반적인 이해를 제공합니다.
마인드 매핑의 초점은 생각에 있고 우리의 일상적인 활동은 생각과 불가분의 관계에 있기 때문에 마인드 매핑에는 매우 다양한 사용 시나리오가 있습니다. 요약, 보고서 발표, 브레인스토밍 등 이를 구현하려면 펜과 종이만 있으면 충분합니다. 물론 다이어그램 제작을 지원할 수 있는 다양한 온라인 및 독립 애플리케이션도 있습니다. 우리 제품이 주제와 관련된 여러 레이어의 관련 정보를 표시해야 하는 경우 마인드 맵을 사용할 수 있습니다. F6는 위 그림과 같은 효과와 같이 작은 프로그램에서 뇌 지도를 쉽게 그릴 수 있습니다. 관련 요구 사항이 있는 학생들은 시도해 볼 가치가 있습니다. [관련 학습 권장 사항: 미니 프로그램 개발 튜토리얼]
데모 예제는f6.antv.vision/zh/docs/exa...를 참조하세요.이 섹션의 코드가 공개되었습니다. 출처, 관심 있으신 분들은 확인하시면 됩니다
npm install @antv/f6 @antv/f6-alipay -S
export default {
id: 'Modeling Methods',
children: [
{
id: 'Classification',
children: [
{
id: 'Logistic regression',
},
{
id: 'Linear discriminant analysis',
},
{
id: 'Rules',
},
{
id: 'Decision trees',
},
{
id: 'Naive Bayes',
},
{
id: 'K nearest neighbor',
},
{
id: 'Probabilistic neural network',
},
{
id: 'Support vector machine',
},
],
},
{
id: 'Consensus',
children: [
{
id: 'Models diversity',
children: [
{
id: 'Different initializations',
},
{
id: 'Different parameter choices',
},
{
id: 'Different architectures',
},
{
id: 'Different modeling methods',
},
{
id: 'Different training sets',
},
{
id: 'Different feature sets',
},
],
},
{
id: 'Methods',
children: [
{
id: 'Classifier selection',
},
{
id: 'Classifier fusion',
},
],
},
{
id: 'Common',
children: [
{
id: 'Bagging',
},
{
id: 'Boosting',
},
{
id: 'AdaBoost',
},
],
},
],
},
{
id: 'Regression',
children: [
{
id: 'Multiple linear regression',
},
{
id: 'Partial least squares',
},
{
id: 'Multi-layer feedforward neural network',
},
{
id: 'General regression neural network',
},
{
id: 'Support vector regression',
},
],
},
],
};{
"defaultTitle": "mindMap",
"usingComponents": {
"f6-canvas": "@antv/f6-alipay/es/container/container"
}
}import F6 from '@antv/f6';
import TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';
import { wrapContext } from '../../../common/utils/context';
import data from './data';
/**
* 脑图-自节点自动两侧分布
*/
Page({
canvas: null,
ctx: null,
renderer: '', // mini、mini-native等，F6需要，标记环境
isCanvasInit: false, // canvas是否准备好了
graph: null,
data: {
width: 375,
height: 600,
pixelRatio: 2,
forceMini: false,
},
onLoad() {
// 注册自定义树，节点等
F6.registerGraph('TreeGraph', TreeGraph);
// 同步获取window的宽高
const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
pixelRatio,
});
},
/**
* 初始化cnavas回调，缓存获得的context
* @param {*} ctx 绘图context
* @param {*} rect 宽高信息
* @param {*} canvas canvas对象，在render为mini时为null
* @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native
*/
handleInit(ctx, rect, canvas, renderer) {
this.isCanvasInit = true;
this.ctx = wrapContext(ctx);
this.renderer = renderer;
this.canvas = canvas;
this.updateChart();
},
/**
* canvas派发的事件，转派给graph实例
*/
handleTouch(e) {
this.graph && this.graph.emitEvent(e);
},
updateChart() {
const { width, height, pixelRatio } = this.data;
// 创建F6实例
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: 'mindmap',
direction: 'H',
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 50;
},
},
});
let centerX = 0;
this.graph.node(function(node) {
if (node.id === 'Modeling Methods') {
centerX = node.x;
}
// position的取值（由于ESlint禁止嵌套的三元表达，所以单独提取出来写）
let position_value = null;
if (node.children && node.children.length > 0) {
position_value = 'left';
} else if (node.x > centerX) position_value = 'right';
else position_value = 'left';
return {
label: node.id,
labelCfg: {
offset: 5,
position: position_value,
},
};
});
this.graph.data(data);
this.graph.render();
this.graph.fitView();
},
});<f6-canvas
width="{{width}}"
height="{{height}}"
forceMini="{{forceMini}}"
pixelRatio="{{pixelRatio}}"
onTouchEvent="handleTouch"
onInit="handleInit"
></f6-canvas>In WeChat
을 먼저 설치
npm install @antv/f6-wx -S
{
"defaultTitle": "脑图",
"usingComponents": {
"f6-canvas": "@antv/f6-wx/canvas/canvas"
}
}<f6-canvas
width="{{width}}"
height="{{height}}"
forceMini="{{forceMini}}"
pixelRatio="{{pixelRatio}}"
bind:onTouchEvent="handleTouch"
bind:onInit="handleInit"
></f6-canvas>import F6 from '@antv/f6-wx';
import TreeGraph from '@antv/f6-wx/extends/graph/treeGraph';
import data from './data';
/**
* 脑图-自节点自动两侧分布
*/
Page({
canvas: null,
ctx: null,
renderer: '', // mini、mini-native等，F6需要，标记环境
isCanvasInit: false, // canvas是否准备好了
graph: null,
data: {
width: 375,
height: 600,
pixelRatio: 1,
forceMini: false,
},
onLoad() {
// 注册自定义树，节点等
F6.registerGraph('TreeGraph', TreeGraph);
// 同步获取window的宽高
const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
// pixelRatio,
});
},
/**
* 初始化cnavas回调，缓存获得的context
* @param {*} ctx 绘图context
* @param {*} rect 宽高信息
* @param {*} canvas canvas对象，在render为mini时为null
* @param {*} renderer 使用canvas 1.0还是canvas 2.0，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派发的事件，转派给graph实例
*/
handleTouch(e) {
this.graph && this.graph.emitEvent(e.detail);
},
updateChart() {
const { width, height, pixelRatio } = this.data;
// 创建F6实例
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: 'mindmap',
direction: 'H',
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 50;
},
},
});
let centerX = 0;
this.graph.node(function(node) {
if (node.id === 'Modeling Methods') {
centerX = node.x;
}
// position的取值（由于ESlint禁止嵌套的三元表达，所以单独提取出来写）
let position_value = null;
if (node.children && node.children.length > 0) {
position_value = 'left';
} else if (node.x > centerX) position_value = 'right';
else position_value = 'left';
return {
label: node.id,
labelCfg: {
offset: 5,
position: position_value,
},
};
});
this.graph.data(data);
this.graph.render();
this.graph.fitView();
},
});@antv/f6-wx 由于微信对npm包不是很友好，所以我们分装了 @antv/f6-wx토론에 오신 것을 환영합니다마인드 매핑 또는 그래프 시각화에 관심이 있으시면 제 WeChat
을 추가하여 WeChat 그룹에 들어갈 수 있습니다. 논의. 더 많은 프로그래밍 관련 지식을 보려면프로그래밍 소개
를 방문하세요! !위 내용은 마인드맵이란 무엇인가? 미니 프로그램에서 F6을 사용하여 마인드맵을 그리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
