位置: IT常识 - 正文

G6绘制树形图(自定义节点、自定义边、自定义布局)(gh树形数据是什么意思)

编辑:rootadmin
G6绘制树形图(自定义节点、自定义边、自定义布局) 目录1 设计节点1.1 定义节点和文本1.2 增加节点1.3 自定义节点样式2 树图配置2.1 允许使用自定义dom节点2.2 内置行为自定义边layout布局demo1 设计节点

推荐整理分享G6绘制树形图(自定义节点、自定义边、自定义布局)(gh树形数据是什么意思),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:绘制树状图,绘制树状图,g6 画图,绘制树状图,gh树形数据,绘制csg树,如何绘制树形图,绘制树状图,内容如对您有帮助,希望把文章链接给更多的朋友!

在 registerNode 中定义所有的节点

G6.registerNode('tree-node', {drawShape: function drawShape(cfg, group) {定义图中需要的节点}}, 'single-node',);

为了使用内置的布局方式,选择参数为 ‘tree-node’ 树节点类型,数据格式可以存在children子节点,效果自动生成子树 cfg 可以拿到数据,如cfg.id、cfg.name

1.1 定义节点和文本

使用 group.addShape(‘rect’, {}) 定义节点 rect 配置参数:https://antv-g6.gitee.io/zh/docs/api/shapeProperties/#fill

// 定义节点 rect const rect = group.addShape('rect', { // 'rect'表示矩形图形 attrs: { // 节点定义参数:颜色、阴影... }, name: 'rect-shape', // 为这个节点起名字 不过没有使用过这个名字 });

使用 group.addShape(‘text’, {}) 定义文本 text

// 定义文本text const text = group.addShape('text', { // 'text'表示文本 attrs: { // 参数:颜色、文字... }, name: 'text-shape', });G6绘制树形图(自定义节点、自定义边、自定义布局)(gh树形数据是什么意思)

节点和文字生成后,再定义他们的相对位置 参考官网定义复杂图样式的方式:https://antv-g6.gitee.io/zh/examples/tree/customItemTree#customTree 使用 .getBBox() 获得该文本的盒子bbox,使用文本盒子的相对位置后面的位置坐标

const bbox = text.getBBox(); // 获得文本的盒子 // 设置rect 节点的位置 rect.attr({ x: -bbox.width / 2 - 5, // x坐标 y: -bbox.height,// y坐标 width: bbox.width + 12 , // 宽 height: bbox.height + 8, // 高 }); // 设置text文本的位置 text.attr({ x: -bbox.width / 2, y: -bbox.height / 2 + 3, })

效果如下

1.2 增加节点

如果想为节点再增加一个小节点,并且位置随着大节点移动,如图 新增节点和文本 rect2 text2

rect2 = group.addShape('rect', { attrs: { // 参数 }, name: 'rect-shape2',});const text2 = group.addShape('text', { attrs: { // 参数 }, name: 'text-shape2',});

为rect2 text2设置坐标,以bbox作为参考位置

// 设置坐标轴和宽高 rect2.attr({ x: -bbox.width / 2 - 24, y: -bbox.height / 2 - 1, width: 14, height: 10, }); text2.attr({ x: -bbox.width / 2 - 23, y: -bbox.height / 2 + 4, })1.3 自定义节点样式roup.addShape('dom', { attrs: { x: -bbox.width / 2 - 24 + 14, // 即:rect的坐标 + rect的宽 y: -bbox.height / 2 - 1, width: 10, height: 10, html: ` <div style="border: 5px solid red;"> 自定义dom </div> `, }, draggable: true, });

使用自定义dom,在 new G6.TreeGraph中 需要设置

renderer : 'svg', // 奇怪的是设置之后原来节点的布局有些影响2 树图配置2.1 允许使用自定义dom节点renderer : 'svg',2.2 内置行为

https://antv-g6.gitee.io/zh/docs/manual/middle/states/defaultBehavior#%E5%86%85%E7%BD%AE-behavior

modes: { default: [ { type: 'collapse-expand', onChange: function onChange(item, collapsed) { const data = item.get('model'); graph.updateItem(item, { collapsed, }); data.collapsed = collapsed; return true; }, }, 'drag-canvas', // 允许拖动 'zoom-canvas', // .... ], },自定义边defaultEdge: { type: 'cubic-horizontal', style: { stroke: 'red' //红色 }, },layout布局

https://antv-g6.gitee.io/zh/docs/manual/middle/layout/tree-graph-layout

layout: { type: 'indented', direction: 'LR', // 节点从左向右分布 dropCap: false, indent: 190, getHeight: () => { return 13; }, getVGap: function getVGap () { return 10; }, },demo<template> <div class="main-content-box"> <div id="container"></div> </div></template> <script> import G6 from '@antv/g6'; export default { name: 'multTagsSec', data () { return { gDatas:{ "id": "1", "name": "storehouse A", "children": [ { "id": "2", "name": "B", "percentage": "60%", "children": [ { "id": "3", "name": "storehouse C", "percentage": "80%", "children": [ { "name": "storehouse C", "percentage": "80%", "children": [ { "name": "D", "percentage": "20%" }, { "name": "storehouselllllll C", "percentage": "20%" } ] }, { "name": "storehouse D", "percentage": "20%" } ] }, { "name": "storehouse D", "percentage": "20%" } ] }, { "name": "storehouse C", "percentage": "100%" }, { "name": "storehouse B", "percentage": "20%" }, { "name": "storehouse C", "percentage": "20%" }, { "name": "storehouse C", "percentage": "20%", "children": [ { "name": "D", "percentage": "20%" }, { "name": "storehouse A", "percentage": "20%" } ] } ] } } }, mounted() { this.getInit(); }, methods: { getInit () { // var mycfg = null; G6.registerNode('tree-node', { drawShape: function drawShape(cfg, group) { // console.log(cfg) // --------------------标签内容节点---------------------- var hasChildren = cfg.children && cfg.children.length > 0; // 是否有孩子节点 var strokeColor = hasChildren == true ? 'red' : null // 有孩子 为红色 // 节点设置 const rect = group.addShape('rect', { attrs: { fill: '#fff', stroke: strokeColor, // 边框颜色 lineWidth: 1, // 边框粗细 radius: 2, shadowBlur: 15, shadowColor: '#666', // shadowOffsetX: 2, // shadowOffsetY: 2 }, name: 'rect-shape', }); // 文本设置 const text = group.addShape('text', { attrs: { text: cfg.name, // 赋值name属性 fontFamily: 'normal', fontSize: 11, fontWeight: 800, x: 0, y: 0, textAlign: 'left', textBaseline: 'middle', fill: '#666' }, name: 'text-shape', }); const bbox = text.getBBox(); // 获得文本的盒子 之后的两个节点的xy轴坐标参考bbox //const minbbox = rect.getBBox(); // 设置 rect方框和text文本 的 x y坐标轴 rect.attr({ x: -bbox.width / 2 - 5, y: -bbox.height, // width: bbox.width + (hasChildren ? 20 : 12), width: bbox.width + 12 , height: bbox.height + 8, }); text.attr({ x: -bbox.width / 2, y: -bbox.height / 2 + 3, }) // -----------百分比节点---------- var hasPercentage = cfg.percentage; var rect2 = 0; if(hasPercentage){ // 节点设置 2 rect2 = group.addShape('rect', { attrs: { fill: '#4682B4', stroke: '', // 边框颜色 lineWidth: 0, // 边框粗细 shadowBlur: 0, shadowColor: '', }, name: 'rect-shape2', }); // 文本设置 2 const text2 = group.addShape('text', { attrs: { text: cfg.percentage, // 赋值name属性 fontFamily: 'normal', fontSize: 5, fontWeight: 500, textAlign: 'left', textBaseline: 'middle', fill: 'white' }, name: 'text-shape2', }); // 设置坐标轴和宽高 rect2.attr({ x: -bbox.width / 2 - 24, y: -bbox.height / 2 - 1, width: 14, height: 10, }); text2.attr({ x: -bbox.width / 2 - 23, y: -bbox.height / 2 + 4, }) // -------连接两个节点的小节点---------- // const rect3 = group.addShape('rect', { // attrs: { // fill: '#00BFFF', // stroke: '', // 边框颜色 // lineWidth: 0, // 边框粗细 // shadowBlur: 0, // shadowColor: '', // }, // name: 'rect-shape3', // }); // rect3.attr({ // x: -bbox.width / 2 - 24 + 14, // 即:rect的坐标 + rect的宽 // y: -bbox.height / 4 + 1, // width: 4, // height: 4 // }); // -------连接两个节点的小节点 三角形---------- // 需要设置svg才能使用 group.addShape('dom', { attrs: { x: -bbox.width / 2 - 24 + 14, // 即:rect的坐标 + rect的宽 y: -bbox.height / 2 - 1, width: 10, height: 10, html: ` <div style="border-left: 5px solid red; border-right: 5px solid transparent; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"> </div> `, }, draggable: true, }); } // 小圆圈 if (hasChildren) { const redcircle = group.addShape('marker', { attrs: { symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse, // symbol: cfg.collapsed ? COLLAPSE_ICON : EXPAND_ICON, stroke: 'red', fill: 'red', lineWidth: 1.8, }, name: 'collapse-icon', }); redcircle.attr({ x: bbox.width / 2 + 7, y: -3 , r: 4, }) } return rect; }, update: (cfg, item) => { const group = item.getContainer(); const icon = group.find((e) => e.get('name') === 'collapse-icon'); icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse); }, }, 'single-node', ); const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; const graph = new G6.TreeGraph({ renderer : 'svg', // 创建自定义DMO时定义 会报一个错 但好像不影响 container: 'container', width, height, modes: { default: [ { type: 'collapse-expand', onChange: function onChange(item, collapsed) { const data = item.get('model'); graph.updateItem(item, { collapsed, }); data.collapsed = collapsed; return true; }, }, // 'drag-canvas', // 不可拖动 'zoom-canvas', ], }, defaultNode: { type: 'tree-node', anchorPoints: [ [0, 0.5], [1, 0.5], ], }, // 设置边的参数 defaultEdge: { type: 'cubic-horizontal', style: { stroke: 'red' }, }, layout: { type: 'indented', direction: 'LR', dropCap: false, indent: 190, getHeight: () => { return 13; }, getVGap: function getVGap () { return 10; }, }, }); graph.data(this.gDatas); graph.render(); graph.fitView(); if (typeof window !== 'undefined') window.onresize = () => { if (!graph || graph.get('destroyed')) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight); }; }, } } </script> <style scoped> </style>

本文链接地址:https://www.jiuchutong.com/zhishi/269500.html 转载请保留说明!

上一篇:鸿蒙系统识别文字功能在哪? 鸿蒙提取图片文字的技巧(鸿蒙系统获取电脑文件)

下一篇:win10锁屏聚焦功能不更新教程(win10锁屏界面windows聚焦什么意思)

  • 重庆公司有哪些大型企业上市名单

    重庆公司有哪些大型企业上市名单

  • 苹果13照片怎么拼图在一起(苹果13照片怎么打马赛克)

    苹果13照片怎么拼图在一起(苹果13照片怎么打马赛克)

  • oppo手机屏幕出现一条竖线是什么原因(oppo手机屏幕出现一条线)

    oppo手机屏幕出现一条竖线是什么原因(oppo手机屏幕出现一条线)

  • 抖音怎么设置别人无法下载(抖音怎么设置别人看不到评论)

    抖音怎么设置别人无法下载(抖音怎么设置别人看不到评论)

  • 瞬间被隐藏是怎么回事(瞬间被隐藏怎么处理)

    瞬间被隐藏是怎么回事(瞬间被隐藏怎么处理)

  • 笔记本除法的符号在哪里(笔记本除法符号跟括号在一起怎么办)

    笔记本除法的符号在哪里(笔记本除法符号跟括号在一起怎么办)

  • 日期格式yyymmdd是什么意思(日期格式转换成文本)

    日期格式yyymmdd是什么意思(日期格式转换成文本)

  • 手机突然显示HD2(手机突然显示无sim卡怎么回事)

    手机突然显示HD2(手机突然显示无sim卡怎么回事)

  • win10防火墙有必要开吗(win10防火墙好用吗)

    win10防火墙有必要开吗(win10防火墙好用吗)

  • 华为手机指纹怎么变彩色(华为手机指纹怎么打开)

    华为手机指纹怎么变彩色(华为手机指纹怎么打开)

  • 小米手环4心率准吗(小米手环4心率不发绿光)

    小米手环4心率准吗(小米手环4心率不发绿光)

  • 常见的三种数据模型(常见的三种数据模型是层次模型)

    常见的三种数据模型(常见的三种数据模型是层次模型)

  • vivov1831a是什么型号(vivoa1813a是什么手机)

    vivov1831a是什么型号(vivoa1813a是什么手机)

  • 苹果x摄像头进灰正常吗(苹果x摄像头进灰小窍门)

    苹果x摄像头进灰正常吗(苹果x摄像头进灰小窍门)

  • oppofindx支持快充吗(oppofindx是什么快充协议)

    oppofindx支持快充吗(oppofindx是什么快充协议)

  • 淘宝买家一颗黄钻代表什么(淘宝买家一颗黄钻收到好评率99.3)

    淘宝买家一颗黄钻代表什么(淘宝买家一颗黄钻收到好评率99.3)

  • 华为体脂秤怎么解除绑定(华为体脂秤怎么调整公斤和斤)

    华为体脂秤怎么解除绑定(华为体脂秤怎么调整公斤和斤)

  • 小米手机怎么连接电脑(小米手机怎么连接空调)

    小米手机怎么连接电脑(小米手机怎么连接空调)

  • 华为share怎么关闭不了(华为share功能怎么关)

    华为share怎么关闭不了(华为share功能怎么关)

  • 魅族16s用什么耳机(魅族16s用什么耳机转换口)

    魅族16s用什么耳机(魅族16s用什么耳机转换口)

  • 华为p30pro有必要贴膜吗(华为p30pro有必要换p40pro吗)

    华为p30pro有必要贴膜吗(华为p30pro有必要换p40pro吗)

  • 苹果xs怎么关闭后台(苹果xs怎么关闭屏幕旋转)

    苹果xs怎么关闭后台(苹果xs怎么关闭屏幕旋转)

  • 苹果x的基带是高通的吗(苹果x使用的基带)

    苹果x的基带是高通的吗(苹果x使用的基带)

  • 红米k20pro防不防水(红米k20por防水吗)

    红米k20pro防不防水(红米k20por防水吗)

  • 百度知道如何用模板答题(用百度知道怎么赚现金)

    百度知道如何用模板答题(用百度知道怎么赚现金)

  • 税后净营业利润和净利润的区别
  • 报税以及注销公司的注意事项?
  • 上交个人所得税分录
  • 固定资产到期账务处理
  • 转给子公司发工资分录
  • 企业所得税年度申报
  • 支付境外特许权所得需要交什么税
  • 核算会计科目职工薪酬的范围
  • 政策性搬迁损失赔偿标准
  • 做内帐和外账需要多久
  • 增值税进项税额转出的账务处理
  • 税后利润补亏的会计分录怎么做
  • 包装成本为产品的百分比
  • 公司司机出车补贴
  • 雇主责任险是否属于财产保险
  • 自然人出租房屋房产税
  • 增值税主要有三种类型
  • 培训学校税收筹划
  • 商品流通企业批发销售会计分录
  • 营改增后不动产进项税额抵扣
  • 培训费表格
  • 企业高管需要什么证书
  • 电子商业汇票会有异地贴现吗
  • 确定无形资产使用寿命时应当考虑的因素有
  • 电脑网络提示ip地址错误怎么办
  • MAC OS X Yosemite开启深色模式的方法
  • 已缴增值税的账务处理
  • 劳务公司账务处理办法
  • 通知单位发放过节补助怎么说
  • 工业厂房修缮工程需要报建吗
  • php框架开发教程
  • 如何配置apache
  • php 命名空间 通俗易懂
  • django pycharm
  • 长期股权投资后续计量收到红利账务处理
  • 车船税每年都要多少钱
  • 酒店周转材料怎么摊销
  • 收到税务局退税怎么入账
  • 小企业会计准则和企业会计准则的区别
  • 预收款方式销售货物的会计分录
  • 税务申报残保金
  • mysql的服务器
  • 什么叫同级财政收支
  • 人力资源外包服务包括哪些
  • 贸易公司退税计算方法选哪一种
  • 厂房装修费用账务处理
  • 生产用品采购怎么购买的
  • 一般纳税人销售旧货可以开专票吗
  • 税控盘减免税款会计分录一般纳税人
  • 企业当年实现的净利润即为企业当年可供分配的利润
  • 签合同前的协议叫什么
  • 资产负债率怎么调整到50%以下
  • 企业建帐的基本要求
  • windows server 2008图片文件无法显示缩略图的解决方法
  • 安装操作系统win10
  • win8磁盘占用率高怎么处理
  • win8自启动在哪儿设置
  • 在u盘安装软件插上就能用
  • windows7怎
  • windows8.1开机
  • wordpress怎么安装插件
  • win10系统无法登陆
  • P2PNetworking3.exe - P2PNetworking3是什么进程 有什么用
  • PHP 7.0.0 Alpha 2 发布
  • js的正则表达式
  • node.js jquery
  • material design设计
  • JQuery中Ajax()的data参数类型实例分析
  • jquery基础知识
  • node.js操作mssql
  • python3.8基础教程
  • 简洁实用的公司治理机制
  • 落实落地是什么意思
  • 实际金额与报关金额不符
  • 工信厅有什么实权
  • shell ftp -n
  • 烟丝和烟有什么区别
  • 地税局一般几点下班
  • 关于切实加强建筑施工领域安全防范工作
  • 福建广电网上营业厅下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设