vue 里使用 antv g6 实现脑图左右布局文本超出隐藏处理自定义边自定义节点自定义事件功能
Posted 凯小默
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 里使用 antv g6 实现脑图左右布局文本超出隐藏处理自定义边自定义节点自定义事件功能相关的知识，希望对你有一定的参考价值。
文档
antv g6 文档：https://antv-g6.gitee.io/zh/docs/manual/introduction
实现效果
效果如下：只是简单的实现一下，有问题在所难免，有好的方案欢迎分享。
数据
这里需要对数据进行一个处理，state: 'left', 表示在左边渲染，anchorPoints 根据左边还是右边，以及是否有 children 有关
export const TREELIST =
id: "1",
name: 'kiamo313 测试第一层',
"children": [
"id": "1-1",
name: '第二层1',
anchorPoints: [[0, 0.5]]
,
"id": "1-2",
name: '第二层2',
state: 'left',
"children": [
"id": "1-2-1",
name: '第三层1',
state: 'left',
children: [
"id": "1-2-1-1",
name: '第四层1第四层1第四层1第四层1第四层1第四层1',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-1-2",
name: '第四层2',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-1-3",
name: '第四层3第四层3第四层3第四层3第四层3第四层3',
state: 'left',
anchorPoints: [[1, 0.5]]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
,
"id": "1-2-2",
name: '第三层2第三层2第三层2第三层2第三层2第三层2',
state: 'left',
children: [
"id": "1-2-2-1",
name: '第四层4',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-2-2",
name: '第四层5第四层5第四层5第四层5第四层5第四层5',
state: 'left',
anchorPoints: [[1, 0.5]]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
,
"id": "1-2-3",
name: '第三层3',
state: 'left',
children: [
"id": "1-2-3-1",
name: '第四层6第四层6第四层6第四层6第四层6',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-3-2",
name: '第四层7',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-3-3",
name: '第四层8',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-3-4",
name: '第四层9第四层9第四层9第四层9第四层9第四层9',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-3-5",
name: '第四层10',
state: 'left',
anchorPoints: [[1, 0.5]]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
,
"id": "1-2-4",
name: '第三层4',
state: 'left',
children: [
"id": "1-2-4-1",
name: '第四层11',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-4-2",
name: '第四层12',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-4-3",
name: '第四层13',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-2-4-4",
name: '第四层14',
state: 'left',
anchorPoints: [[1, 0.5]]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
,
"id": "1-3",
name: '第二层3',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-4",
name: '第二层4',
anchorPoints: [[0, 0.5]]
,
"id": "1-5",
name: '第二层5',
"children": [
"id": "1-5-1",
name: '第三层1',
children: [
"id": "1-5-1-1",
name: '第四层1第四层1第四层1第四层1第四层1',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-1-2",
name: '第四层2',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-1-3",
name: '第四层3第四层3第四层3',
anchorPoints: [[0, 0.5]]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
,
"id": "1-5-2",
name: '第三层2',
children: [
"id": "1-5-2-1",
name: '第四层4',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-2-2",
name: '第四层5',
anchorPoints: [[0, 0.5]]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
,
"id": "1-5-3",
name: '第三层3',
children: [
"id": "1-5-3-1",
name: '第四层6',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-3-2",
name: '第四层7',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-3-3",
name: '第四层8',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-3-4",
name: '第四层9第四层9第四层9第四层9第四层9',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-3-5",
name: '第四层10',
anchorPoints: [[0, 0.5]]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
,
"id": "1-5-4",
name: '第三层4',
children: [
"id": "1-5-4-1",
name: '第四层11',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-4-2",
name: '第四层12',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-4-3",
name: '第四层13',
anchorPoints: [[0, 0.5]]
,
"id": "1-5-4-4",
name: '第四层14',
anchorPoints: [[0, 0.5]]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
,
"id": "1-6",
name: '第二层6',
anchorPoints: [[0, 0.5]]
,
"id": "1-7",
name: '第二层7',
anchorPoints: [[0, 0.5]]
,
"id": "1-8",
name: '第二层8',
anchorPoints: [[0, 0.5]]
,
"id": "1-9",
name: '第二层9',
anchorPoints: [[0, 0.5]]
,
"id": "1-10",
name: '第二层10',
anchorPoints: [[0, 0.5]]
,
"id": "1-11",
name: '第二层11',
anchorPoints: [[0, 0.5]]
,
"id": "1-12",
name: '第二层12',
anchorPoints: [[0, 0.5]]
,
"id": "1-13",
name: '第二层13第二层13第二层13第二层13',
anchorPoints: [[0, 0.5]]
,
"id": "1-14",
name: '第二层1-14',
anchorPoints: [[0, 0.5]]
,
"id": "1-15",
name: '第二层15第二层15第二层15第二层15',
anchorPoints: [[0, 0.5]]
,
"id": "1-16",
name: '第二层16',
anchorPoints: [[0, 0.5]]
,
"id": "1-27",
name: '第二层27',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-28",
name: '第二层28',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-29",
name: '第二层29',
state: 'left',
anchorPoints: [[1, 0.5]]
,
"id": "1-30",
name: '第二层30',
state: 'left',
anchorPoints: [[1, 0.5]]
,
],
anchorPoints: [
[1, 0.5],
[0, 0.5]
]
代码实现
<template>
<div id="g6-kaimo"></div>
</template>
<script>
import G6 from '@antv/g6';
import TREELIST from "./data/list.js";
export default
name: 'G6Demo',
mounted()
this.initTree(TREELIST);
,
React下使用antv/g6实现树图/流程图