技术标签: ️️--antV G6 antvG6 antvG6画树形结构图
效果图:
npm install --save @antv/g6
import G6 from '@antv/g6';
export function renderMap(data,graph){
const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
];
};
const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
['M', x, y - 2 * r + 2],
['L', x, y - 2],
];
};
G6.Util.traverseTree(data, (d) => {
d.leftIcon = {
style: {
fill: '#3759B0',
stroke: '#e6fffb',
},
};
return true;
});
G6.registerNode('icon-node', {
options: {
size: [60, 20],
stroke: '#73D13D',
fill: '#fff'
},
draw(cfg, group) {
const styles = this.getShapeStyle(cfg)
const { labelCfg = {} } = cfg
const keyShape = group.addShape('rect', {
attrs: {
...styles,
x: 0,
y: 0
}
})
/**
* leftIcon 格式如下:
* {
* style: ShapeStyle;
* img: ''
* }
*/
// console.log('cfg.leftIcon', cfg.leftIcon);
if (cfg.leftIcon) {
const { style, img } = cfg.leftIcon
group.addShape('rect', {
attrs: {
x: 10,
y: 8,
width: 24,
radius: 12,
height: styles.height - 16,
fill: '#8c8c8c',
...style
}
})
group.addShape('text', {
attrs: {
text: cfg.name,
x: 22,
y: 21,
fill: '#ffffff',
fontSize: 12,
textAlign: 'center',
textBaseline: 'middle',
fontWeight: 'bold',
},
name: 'text-shape',
});
group.addShape('image', {
attrs: {
x: 8,
y: 8,
width: 24,
height: 24,
},
name: 'image-shape',
});
}
// 如果不需要动态增加或删除元素,则不需要 add 这两个 marker
group.addShape('marker', {
attrs: {
x: 130,
y: 18,
r: 6,
stroke: '#707070',
cursor: 'pointer',
symbol: EXPAND_ICON
},
name: 'add-item'
})
group.addShape('marker', {
attrs: {
x: 130,
y: 36,
r: 6,
stroke: '#5C5C5C',
cursor: 'pointer',
symbol: COLLAPSE_ICON
},
name: 'remove-item'
})
if (cfg.label) {
group.addShape('text', {
attrs: {
...labelCfg.style,
text: cfg.label,
x: 50,
y: 25,
}
})
}
return keyShape
}
}, 'rect')
G6.registerEdge('flow-line', {
draw(cfg, group) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const { style } = cfg
const shape = group.addShape('path', {
attrs: {
stroke: style.stroke,
endArrow: style.endArrow,
path: [
['M', startPoint.x, startPoint.y],
['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, (startPoint.y + endPoint.y) / 2,],
['L', endPoint.x, endPoint.y],
],
},
});
return shape;
}
});
const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
graph.data(data);
graph.render();
graph.fitView();
graph.on('node:mouseenter', evt => {
const { item } = evt
graph.setItemState(item, 'hover', true)
})
graph.on('node:mouseleave', evt => {
const { item } = evt
graph.setItemState(item, 'hover', false)
})
}
import G6 from "@antv/g6";
import { renderMap } from "../../../assets/common/http";
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import G6 from "@antv/g6"; //注意引入
import { renderMap } from "../../../assets/common/http"; //朱茵引入封装的函数
export default {
data() {
return {
graph: {}, //定义一个graph对象
data: { //定义一个公共数据数组
id: "root",
label: "root",
name: 1,
children: [
{
id: "c1",
label: "c1",
name: 2,
children: [
{
id: "c1-1",
label: "c1-1",
name: 3
},
{
id: "c1-2",
label: "c1-2",
name: 3,
children: [
{
id: "c1-2-1",
label: "c1-2-1",
name: 4
},
{
id: "c1-2-2",
label: "c1-2-2",
name: 4
}
]
}
]
},
{
id: "c2",
label: "c2",
name: 2
},
{
id: "c3",
label: "c3",
name: 2,
children: [
{
id: "c3-1",
label: "c3-1",
name: 3
},
{
id: "c3-2",
label: "c3-2",
name: 3,
children: [
{
id: "c3-2-1",
label: "c3-2-1",
name: 4
},
{
id: "c3-2-2",
label: "c3-2-2",
name: 4
},
{
id: "c3-2-3",
label: "c3-2-3",
name: 4
}
]
},
{
id: "c3-3",
label: "c3-3",
name: 3
}
]
}
]
},
};
},
mounted() {
this.render(); //注意渲染
},
methods: {
render() {
const defaultStateStyles = {
hover: {
stroke: "#1890ff",
lineWidth: 2
}
};
const defaultNodeStyle = {
fill: "#F3F7FF",
stroke: "#3759B0",
radius: 5
};
const defaultEdgeStyle = {
stroke: "#91d5ff",
endArrow: {
path: "M 0,0 L 12, 6 L 9,0 L 12, -6 Z",
fill: "#91d5ff",
d: -20
}
};
const defaultLabelCfg = {
style: {
fill: "#000",
fontSize: 12
}
};
const defaultLayout = {
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 40;
},
getHGap: function getHGap() {
return 70;
}
};
const width = document.getElementById("container").scrollWidth;
const height = document.getElementById("container").scrollHeight || 450;
this.graph = new G6.TreeGraph({
container: "container",
width: width,
height: height,
linkCenter: true,
modes: {
default: ["drag-canvas", "zoom-canvas"]
},
defaultNode: {
type: "icon-node",
size: [120, 40],
style: defaultNodeStyle,
labelCfg: defaultLabelCfg
},
defaultEdge: {
type: "cubic-horizontal",
style: {
stroke: "#A3B1BF"
}
},
nodeStateStyles: defaultStateStyles,
edgeStateStyles: defaultStateStyles,
layout: defaultLayout
});
//节点双击事件,这里的编辑页面用的是浏览器的弹窗,也可自己编写页面进行调用
this.graph.on('node:dblclick', (evt,element) => {
console.log(evt,element)
const { item, target } = evt
console.log(evt)
const targetType = target.get('type')
const name = target.get('name')
console.log(target)
var str=prompt("随便写点儿啥吧",target.attrs.text);
})
this.graph.on('node:click', evt => {
const { item, target } = evt
const targetType = target.get('type')
const name = target.get('name')
// 增加元素,这里增加元素也是用的浏览器的弹窗
if (targetType === 'marker') {
const model = item.getModel()
if (name === 'add-item') {
if (!model.children) {
model.children = []
}
const id = 'ra';
var str=prompt("请输入节点名称","比如c3-3-4");
if(str){
target.attrs.text = str
model.children.push({
id,
name:1,
label: str,
})
this.graph.updateChild(model, model.id)
}
//删除节点
} else if (name === 'remove-item') {
this.graph.removeChild(model.id)
}
}
})
renderMap(this.data, this.graph); //别忘了渲染
},
}
};
</script>
<style scoped lang="less">
@media screen and (min-width: 200px) and (max-width: 1600px) {
#container {
margin-top: 1%;
height: 350px;
}
}
@media screen and (min-width: 1601px) {
#container {
height: 500px;
margin-top: 2%;
}
}
</style>
以上内容若有问题,欢迎各位指正,共同学习~~
文章浏览阅读3.4w次,点赞39次,收藏191次。一、 前言:项目舍弃了原本的SSH框架,改用Spring Boot框架,并且要引入Spring Security为系统提供安全访问控制解决方案,接下来记录一下这两天在Spring Boot中引入Spring Security 的过程。主要参考了以下项目、博客和手册:(目前最新的Spring Security版本为5.0.4,我使用的是5.0.3,前三个链接中用的应该都是Spring Securit..._springboot org.springframework.security.web.access.intercept.filtersecurityi
文章浏览阅读486次。是 PyTorch 中用于处理变长序列数据的函数。它的主要作用是将一个批次的序列数据打包成适合输入到 RNN(循环神经网络)模型中的形式,以避免对填充部分进行多余的计算。在自然语言处理任务中,例如文本分类、机器翻译等,输入的文本序列长度往往不同,为了方便进行批量处理,需要对较短的序列进行填充(padding)使其与最长序列的长度相同。但是,在某些情况下,填充的部分对模型来说是没有意义的,而且会导致额外的计算开销。因此,函数将填充的部分从计算中移除,以提高模型的效率。下面是一个示例,介绍了如何使用。_pack_padded_sequence
文章浏览阅读1.1k次。为什么要使用绑定变量:在JAVA中的SQL 语句的编写方面,没有使用ORACLE 绑定变量,很大程度上降低了数据库的性能,表现在两个方面:1、SQL语句硬分析(Hard Parse)太多,严重消耗CPU资源,延长了SQL语句总的执行时间。SQL语句的执行过程分几个步骤:语法检查、分析、执行、返回结果。其中分析又分为硬分析(Hard Parse)和软分析(Soft P..._java oracle绑定变量
文章浏览阅读127次。flutter mixin_flutter mixin 混入 mixin
文章浏览阅读888次。贴个图众所周知,Windows Terminal没有美化后那个傻大蓝,沉默黑简直不忍直视。没有像官方演示的那么美观(所以得自己捯饬捯饬好看的样子)美化开始第一步安装相关的模块和PowerLine主题Install-Module posh-git -Scope CurrentUserInstall-Module oh-my-posh -Scope CurrentUser如果你使用管理员权限打开PowerShell并且想把oh-my-posh安装到所有用户,则输入Install-Module _aka terminal美化
文章浏览阅读435次。一、前言自从研究Qt编写自定义控件以来,一发不可收拾,越多越多人有类似的需求找我定制控件,陆陆续续写了上百个控件,目前已超过150个,于是逐渐衍生了另外一个需求,提供一个控件属性设计器,类似QtDesigner一样,可以方便的拖曳控件,改变属性,立即应用,并导出到文件方便下次直接加载,这个设计器有点像组态中的一个雏形,提供了基本的加载控件,导入导出数据,数据源绑定等。本系列文章将从加..._qt实现属性编辑
文章浏览阅读154次。简介:Thinkphp内核全新优化UI界面双端源码网盘下载地址:http://kekewangLuo.net/soNTf1nZ2ps0图片:_全新ui风格影视网站源码
文章浏览阅读512次。gradle 是一个打包工具, 是一个开源构建自动化工具,足够灵活,可以构建几乎任何类型的软件,高性能、可扩展、能洞察等。其中洞察,可以用于分析构建过程中数据,提供分析参考,方便排查问题和不断优化构建性能,以下一次编译分析报告。_maven转gradle插件
文章浏览阅读979次,点赞21次,收藏9次。基于java的在线问卷调查系统的设计与实现的主要使用者分为:管理员权限操作的功能包括对注册用户信息的管理,对问卷,题目,问卷调查,新闻资讯等信息的管理。用户权限操作的功能包括参与问卷调查,查看新闻,查看问卷调查记录。
文章浏览阅读974次。勒让德惯性椭圆求解1.matlab利用二阶矩求解椭圆长轴、短轴、离心率、长轴与x轴夹角xbar=stats(k).Centroid(1);%区域的重心坐标ybar = stats(k).Centroid(2); x = list(:,1) - xbar; y = -(list(:,2) - ybar); % This is negative for the % orientation calculation (measured in the % counter-clockwise dire_二阶矩确认椭圆
文章浏览阅读155次。在本教程中,我们涵盖了Python编程的主要主题,包括Python基础知识、Python数学、Python网络编程、Python算法和数据结构、Python机器学习、Python Web开发和Python游戏开发。
文章浏览阅读67次。在Ubuntu 12.04 64 位 搭载Android4.4源码编译环境 一、准备工作:(1) VMare Workstation 10(2)Ubuntu12.04 64bit(3) JDK1.6(4)Android 4.4 源码(PS:...