G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Rect
G6 内置了 rect 节点,其默认样式如下。标签文本位于矩形中央。
使用方法
如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置。
1 实例化图时全局配置
用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 ‘rect’,即可使用 rect 节点。
const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {type: 'rect',// 其他配置},
});
2 在数据中动态配置
如果需要使不同节点有不同的配置,可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据,也可以通过遍历数据的方式写入。
const data = {nodes: [{id: 'node0',type: 'rect',... // 其他配置},... // 其他节点],edges: [... // 边]
};
配置项说明
rect 节点支持 节点通用配置,下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解:
名称 | 含义 | 类型 | 备注 |
---|---|---|---|
size | rect 的宽高 | Number | Array |
style | rect 默认样式 | Object | Canvas 支持的属性 |
label | 标签文本内容 | String | |
labelCfg | 标签配置项 | Object | |
stateStyles | 各状态下的样式 | Object |
只对 keyShape 起作用
|
linkPoints | 视觉上的四个锚点 | Object | 默认不显示,应与 anchorPoints 配合使用。二者区别请看 linkPoints |
样式属性 style
Object 类型。支持 节点通用样式。通过 style 配置来修改 rect 的填充色、边框颜色、阴影等属性。
名称 | 含义 | 类型 | 备注 |
---|---|---|---|
radius | 圆角半径 | Number | 默认为直角矩形 |
stroke | 描边颜色 | String | |
lineWidth | 描边粗细 | Number |
默认为 1
|
fill | 填充色 | String | |
fillOpacity | 透明度 | Number |
默认为 1
|
下面代码演示在实例化图时全局配置方法中配置 style,使之达到如下图效果。
const data = {nodes: [{x: 100,y: 100,type: 'rect',label: 'rect',},],
};const graph = new G6.Graph({container: 'mountNode',width: 500,height: 300,defaultNode: {// type: 'rect', // 在数据中已经指定了 type,这里无需再次指定style: {fill: '#bae637',stroke: '#eaff8f',lineWidth: 5,radius: 10,},},
});
graph.data(data);
graph.render();
标签文本配置 labelCfg
Object 类型。通过 labelCfg 配置标签文本。支持 节点通用标签配置。基于上面 样式属性 style 中的代码,下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置,使之达到如下图效果。
const data = {// ... data 内容
};
const graph = new G6.Graph({// ... 图的其他配置defaultNode: {// ... 其他配置labelCfg: {style: {fill: '#9254de',fontSize: 18,},position: 'bottom',},},
});
// ...
linkPoints
Object 类型。通过配置 linkPoints ,可以指定矩形周围「上、下、左、右」四个小圆点。
⚠️ 注意: 区分于 anchorPoints: anchorPoints 是真正用于指定该节点相关边的连入位置的「数组」;而 linkPoints 仅是指定是否「绘制」出四个圆点,不起实际的连接相关边的作用。二者常常配合使用。
名称 | 含义 | 类型 | 备注 |
---|---|---|---|
top | 是否显示上部的圆点 | Boolean |
默认为 false
|
bottom | 是否显示底部的圆点 | Boolean |
默认为 false
|
left | 是否显示左侧的圆点 | Boolean |
默认为 false
|
right | 是否显示右侧的圆点 | Boolean |
默认为 false
|
size | 圆点的大小 | Number |
默认为 3
|
fill | 圆点的填充色 | String |
默认为 '#72CC4A'
|
stroke | 圆点的边框颜色 | String |
默认为 '#72CC4A'
|
lineWidth | 圆点边框的宽度 | Number |
默认为 1
|
基于上面 样式属性 style 中的代码,下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置。
const data = {// ... data 内容
};
const graph = new G6.Graph({// ... 图的其他配置defaultNode: {// 其他配置linkPoints: {top: true,bottom: true,left: true,right: true,size: 5,fill: '#fff',},},
});
// ...
G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Rect相关推荐
- G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——内置节点总览
G6 的内置节点包括 circle,rect,ellipse,diamond,triangle,star,image,modelRect.这些内置节点的默认样式分别如下图所示. 本文将概述 G6 中的 ...
- G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Circle
G6 内置了圆 Circle 节点,其默认样式如下.标签文本位于圆形中央. 使用方法 如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置. 1 实例化图时全局配置 用户 ...
- 核心概念——节点/边/Combo——内置节点——Triangle
title: Triangle order: 5 Triangle G6 内置了三角形 Triangle 节点,其默认样式如下.标签文本位于三角形下方. 使用方法 如 内置节点 一节所示,配置节点的 ...
- 核心概念——节点/边/Combo——内置节点——Diamond
title: Diamond order: 4 Diamond G6 内置了菱形 Diamond 节点,其默认样式如下.标签文本位于菱形中央. 使用方法 如 内置节点 一节所示,配置节点的方式有两 ...
- 核心概念——节点/边/Combo——内置节点——Ellipse
title: Ellipse order: 3 G6 内置了 ellipse 节点,其默认样式如下.标签文本位于椭圆中央. 使用方法 如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置 ...
- G6 图可视化引擎——入门教程——前言
什么是 G6 G6 是一个图可视化引擎.它提供了图的绘制.布局.分析.交互.动画等基础的图可视化能力.旨在让关系变得透明,简单.让用户获得关系数据的 Insight. 入门教程简介 我们在本入门教程中 ...
- G6 图可视化引擎——简介
什么是 G6 G6 是一个图可视化引擎.它提供了图的绘制.布局.分析.交互.动画等图可视化的基础能力.旨在让关系变得透明,简单.让用户获得关系数据的 Insight. 基于 G6,用户可以快速搭建自己 ...
- G6图可视化引擎 v4.1.7
介绍: G6 是一个图可视化引擎.它提供了图的绘制.布局.分析.交互.动画等图可视化的基础能力.旨在让关系变得透明,简单.让用户获得关系数据的 Insight. 基于 G6,用户可以快速搭建自己的 图 ...
- G6 图可视化引擎——入门教程——元素及其配置
图的元素特指图上的节点 Node 和边 Edge .在上一章节中,我们已经将 Tutorial 案例的图绘制了出来,但是各个元素及其 label 在视觉上很简陋.本文通过将上一章节中简陋的元素美化成如 ...
最新文章
- 小酌重构系列[8]——提取接口
- 重大通知:社交系统ThinkSNS+ 发布公告!
- 网站的高性能架构---存储性能优化
- docker中部署Redis
- 2011年计算机基础知识试卷,2011年计算机一级考试理论试题:第六部分多选题
- android listview 优化,Android ListView、GridView等性能优化
- 搭建nfs共享存储服务之二nfs服务端配置
- 面试:一文搞懂重载和重写的区别
- java条件触发,触发器触发条件是什么?更改数据时实现方法是什么?
- 提取Python stringlib中的BMHBNFS字符串查找算法
- 怎样知道android的手机号码,怎么知道自己的手机号
- 前端预览excel插件_网页实现Excel在线预览方案集合
- “车规级”与“功能安全”(ISO26262)的区别——摘自《5万字长文说清“车规级”》...
- 模拟器安装magisk
- Windows10系统提示 为了对电脑进行保护,已经阻止此应用(管理员已阻止你运行此应用。有关详细信息,请与管理员联系。)的解决办法
- 品牌笔记本预装windows的OEM分区解决方案(联想)
- Hive 异常,长期更新帖
- 【BUCTOJ】链表的基本操作
- 全国计算机等级考试 贴吧,【全国计算机等级考试】
- Linux(CentOS下)更改终端命令行颜色及网络配置
热门文章
- Eclipse开发过程中个VM Arguments的设置
- Django框架Day3------之Models
- Python 标准库 —— uuid(生成唯一 ID)
- h5专题应该兼容那些浏览器?
- OC中数组排序的3种方法
- 向数据库中导入AWR数据
- BIETLOLTP之概念熟悉
- 奇安信cdn配置教程_PicGo+jsDelivr+GitHub搭建免费cdn加速的图床
- 计算机科学与技术专家报告内容,计算机科学与技术专业设计报告大学内容.docx...
- linux挂载nfs显示nobady,51CTO博客-专业IT技术博客创作平台-技术成就梦想