G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——内置节点总览
G6 的内置节点包括 circle,rect,ellipse,diamond,triangle,star,image,modelRect。这些内置节点的默认样式分别如下图所示。
本文将概述 G6 中的各个内置节点类型、内置节点的通用属性、配置方法。
内置节点类型说明
下面表格中显示了内置的各类节点,同时对一些特殊的字段进行了说明:
名称 | 描述 | 默认示例 |
---|---|---|
circle |
圆形: - size 是单个数字,表示直径- 圆心位置对应节点的位置 - color 字段默认在描边上生效- 标签文本默认在节点中央 - 更多字段见 Circle 节点教程 |
|
rect |
矩形: - size 是数组,例如:[100, 50]- 矩形的中心位置是节点的位置,而不是左上角 - color 字段默认在描边上生效- 标签文本默认在节点中央 - 更多字段见 Rect 节点教程 |
|
ellipse |
椭圆: - size 是数组,表示椭圆的长轴直径和短轴直径- 椭圆的圆心是节点的位置 - color 字段默认在描边上生效- 标签文本默认在节点中央 - 更多字段见 Ellipse 节点教程 |
|
diamond |
菱形: - size 是数组,表示菱形的宽和高- 菱形的中心位置是节点的位置 - color 字段默认在描边上生效- 标签文本默认在节点中央 - 更多字段见 Diamond 节点教程 |
|
triangle |
三角形: - size 是数组,表示三角形的底和高- 三角形的中心位置是节点的位置 - color 字段默认在描边上生效- 标签文本默认在节点下方 - 更多字段见 Triangle 节点教程 |
|
star |
星形: - size 是单个数字,表示星形的大小- 星星的中心位置是节点的位置 - color 字段默认在描边上生效- 标签文本默认在节点中央 - 更多字段见 Star 节点教程 |
|
image |
图片: - size 是数组,表示图片的宽和高- 图片的中心位置是节点位置 - img 图片的路径,也可以在 style 里面设置- color 字段不生效- 标签文本默认在节点下方 - 更多字段见 Image 节点教程 |
|
modelRect |
卡片: - size 是数组,表示卡片的宽和高- 卡片的中心位置是节点的位置 - color 字段默认在描边上生效- 标签文本默认在节点中央 - 若有 description 字段则显示在标签文本下方显示 description 内容- 更多字段见 ModelRect 节点教程 |
|
节点的通用属性
所有内置的节点支持的通用属性:
名称 | 是否必须 | 类型 | 备注 |
---|---|---|---|
id | true | String | 节点唯一 ID,必须是唯一的 string |
x | false | Number | x 坐标 |
y | false | Number | y 坐标 |
type | false | String |
指定节点类型,内置节点类型名称或自定义节点的名称。默认为 'circle'
|
size | false | Number / Array | 节点的大小 |
anchorPoints | false | Array |
指定边连入节点的连接点的位置(相对于该节点而言),可以为空。例如: [0, 0] ,代表节点左上角的锚点,[1, 1] ,代表节点右下角的锚点
|
style | false | Object | 节点的样式属性。 |
label | false | String | 文本文字 |
labelCfg | false | Object | 文本配置项 |
样式属性 style
Object 类型。通过 style 配置来修改节点的填充色、边框颜色、阴影等属性。下表是 style 对象中常用的配置项:
名称 | 是否必须 | 类型 | 备注 |
---|---|---|---|
fill | false | String | 节点填充色 |
stroke | false | String | 节点的描边颜色 |
lineWidth | false | Number | 描边宽度 |
lineDash | false | Number[] | 描边虚线,数组代表实、虚长度 |
shadowColor | false | String | 阴影颜色 |
shadowBlur | false | Number | 阴影范围 |
shadowOffsetX | false | Number | 阴影 x 方向偏移量 |
shadowOffsetY | false | Number | 阴影 y 方向偏移量 |
opacity | false | Number | 设置绘图的当前 alpha 或透明值 |
fillOpacity | false | Number | 设置填充的 alpha 或透明值 |
cursor | false | String | 鼠标在该节点上时的鼠标样式,CSS 的 cursor 选项都支持 |
下面代码演示在实例化图时全局配置方法中配置 style:
const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {// ... 其他属性style: {fill: '#steelblue',stroke: '#eaff8f',lineWidth: 5,// ... 其他属性},},
});
标签文本 label 及其配置 labelCfg
label String 类型。标签文本的文字内容。
labelCfg Object 类型。配置标签文本。下面是 labelCfg 对象中的常用配置项:
名称 | 是否必须 | 类型 | 备注 |
---|---|---|---|
position | false | String |
文本相对于节点的位置,目前支持的位置有:'center' ,'top' ,'left' ,'right' ,'bottom' 。默认为 'center' 。modelRect 节点不支持该属性
|
offset | false | Number |
文本的偏移,position 为 'bottom' 时,文本的上方偏移量;position 为 'left' 时,文本的右方偏移量;以此类推在其他 position 时的情况。modelRect 节点的 offset 为左边距
|
style | false | Object | 标签的样式属性。 |
上表中的标签的样式属性 style 的常用配置项如下:
名称 | 是否必须 | 类型 | 备注 |
---|---|---|---|
fill | false | String | 文本颜色 |
stroke | false | String | 文本描边颜色 |
lineWidth | false | Number | 文本描边粗细 |
opacity | false | Number | 文本透明度 |
fontFamily | false | Number | 文本字体 |
fontSize | false | Number | 文本字体大小 |
... 节点标签与边标签样式属性相同,统一整理在 Text 图形 API |
下面代码演示在实例化图时全局配置方法中配置 label 和 labelCfg。
const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {// ... 其他属性label: 'node-label',labelCfg: {position: 'bottom',offset: 10,style: {fill: '#666',},},},
});
节点的配置方法
配置节点的方式有三种:实例化图时全局配置,在数据中动态配置,使用 graph.node(nodeFn) 函数配置。这几种配置方法可以同时使用,优先级:使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置。
即有相同的配置项时,优先级高的方式将会覆盖优先级低的。
实例化图时全局配置
用户在实例化 Graph 时候可以通过 defaultNode 配置节点,这里的配置是全局的配置,将会在所有节点上生效。
const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {type: 'circle',// 其他配置},
});
在数据中动态配置
如果需要为不同节点进行不同的配置,可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据,也可以通过遍历数据的方式写入。
const data = {nodes: [{id: 'node0',size: 100,type: 'rect',... // 其他属性style: {... // 样式属性,每种节点的详细样式属性参见各节点文档}},{id: 'node1',size: [50, 100],type: 'ellipse',... // 其他属性style: {... // 样式属性,每种节点的详细样式属性参见各节点文档}},... // 其他节点],edges: [... // 边]
}
使用 graph.node()
该方法可以为不同节点进行不同的配置。
提示:
- 该方法必须在 render 之前调用,否则不起作用;
- 由于该方法优先级最高,将覆盖其他地方对节点的配置,这可能将造成一些其他配置不生效的疑惑;
- 该方法在增加元素、更新元素时会被调用,如果数据量大、每个节点上需要更新的内容多时,可能会有性能问题。
// const data = ...
// const graph = ...
graph.node(node => {return {id: node.id,type: 'rect',style: {fill: 'blue',},};
});graph.data(data);
graph.render();
示例
const data = {nodes: [{id: 'node_circle',x: 100,y: 100,type: 'circle',label: 'circle',},{id: 'node_rect',x: 200,y: 100,type: 'rect',label: 'rect',},{id: 'node-ellipse',x: 330,y: 100,type: 'ellipse',label: 'ellipse',},{id: 'node-diamond',x: 460,y: 100,type: 'diamond',label: 'diamond',},{id: 'node-triangle',x: 560,y: 100,//size: 80,type: 'triangle',label: 'triangle',},{id: 'node-star',x: 660,y: 100,//size: [60, 30],type: 'star',label: 'star',},{id: 'node-image',x: 760,y: 100,size: 50,type: 'image',img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',label: 'image',},{id: 'node-modelRect',x: 900,y: 100,type: 'modelRect',label: 'modelRect',},],
};const graph = new G6.Graph({container: 'mountNode',width: 1500,height: 300,
});
graph.data(data);
graph.render();
显示结果:
triangle 节点和 image 节点的标签文本默认位置为:position:‘bottom’ ,其他节点文本的默认位置都为:position: ‘center’;
调整节点配置
下面演示通过将配置写入数据的方式,调整 id 为 ‘node-ellipse’ 的椭圆节点的文本位置,颜色和样式。将下面代码替换上面代码中 id 为 ‘node-ellipse’ 的节点数据即可生效。
{id: 'node-ellipse',x: 330,y: 100,type: 'ellipse',size: [60, 30],label: 'ellipse',labelCfg: {position: 'bottom',offset: 5},style: {fill: '#fa8c16',stroke: '#000',lineWidth: 2}
}
再为 id 为 ‘node-modelRect’ 的 modelRect 节点添加描述文字,使用下面代码替换 id 为 ‘node-modelRect’ 的节点数据即可得到带有内容为 ‘描述文本 xxxxxxxxxxx’ 的 modelRect 节点。
G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——内置节点总览相关推荐
- G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Circle
G6 内置了圆 Circle 节点,其默认样式如下.标签文本位于圆形中央. 使用方法 如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置. 1 实例化图时全局配置 用户 ...
- G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Rect
G6 内置了 rect 节点,其默认样式如下.标签文本位于矩形中央. 使用方法 如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置. 1 实例化图时全局配置 用户在实例 ...
- G6 图可视化引擎——入门教程——前言
什么是 G6 G6 是一个图可视化引擎.它提供了图的绘制.布局.分析.交互.动画等基础的图可视化能力.旨在让关系变得透明,简单.让用户获得关系数据的 Insight. 入门教程简介 我们在本入门教程中 ...
- G6 图可视化引擎——简介
什么是 G6 G6 是一个图可视化引擎.它提供了图的绘制.布局.分析.交互.动画等图可视化的基础能力.旨在让关系变得透明,简单.让用户获得关系数据的 Insight. 基于 G6,用户可以快速搭建自己 ...
- G6图可视化引擎 v4.1.7
介绍: G6 是一个图可视化引擎.它提供了图的绘制.布局.分析.交互.动画等图可视化的基础能力.旨在让关系变得透明,简单.让用户获得关系数据的 Insight. 基于 G6,用户可以快速搭建自己的 图 ...
- G6 图可视化引擎——入门教程——图的交互 Behavior
G6 封装了一系列交互方法,方便用户直接使用.本文将为 Tutorial 案例 增加简单的交互:hover 节点.点击节点.点击边.放缩画布.拖拽画布.本节目标效果如下: 基本概念 交互行为 Beha ...
- G6 图可视化引擎——入门教程——元素及其配置
图的元素特指图上的节点 Node 和边 Edge .在上一章节中,我们已经将 Tutorial 案例的图绘制了出来,但是各个元素及其 label 在视觉上很简陋.本文通过将上一章节中简陋的元素美化成如 ...
- G6 图可视化引擎——入门教程——绘制 Tutorial 案例
本文将进行 Tutorial 案例的简单绘制和配置.通过本文,你将知道创建一般图时一些常用的配置项及其作用. 基础绘制 创建容器 需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器,通常为 d ...
- G6 图可视化引擎——快速上手
安装 & 引用 在项目中引入 G6 有以下两种方式:NPM 引入:CDN 引入. 在项目中使用 NPM 包引入 Step 1: 使用命令行在项目目录下执行以下命令: npm install - ...
最新文章
- 上海交大张拳石:漂在零丁洋里的体系,神经网络的博弈交互解释性
- oracle学习笔记day2
- bzoj4196:[Noi2015]软件包管理器
- 正交投影与最佳最小二乘解
- asp.net取消页面表单内文本输入框的Enter响应
- 致命错误: 在类路径或引导类路径中找不到程序包 java.lang_如何提升店铺动态评分 需要提升可以找我...
- 全视频沟通不再远 罗技为中国企业开启视频协作新格局
- 使用行为树(Behavior Tree)实现游戏AI
- Xamarin For Visual Studio 3.7.165 完整离线破解版
- java web相对路径_java(Web)中相对路径,绝对路径问题总结
- c语言视频教程全集(c语言视频教程 谭浩强)
- 《认知天性》:讲述基于科学的学习方法
- 超级搜索术4-学业有成/职场晋升
- Word导出带目录的PDF
- PageHelper.startPage分页失效问题,亲测已解决
- 羊车门问题。有三扇关闭的门,一扇门背后面停着汽车,其余门后面是山羊,只有主持人知道每扇门后面是什么。参赛者可以选择一扇门,在开启它之前,主持人会开启另一扇门,露出门后的山羊,然后允许参赛者更换自己的选
- 锐捷密码忘了!-锐捷密码查看器
- 计算机主板上的命名,电脑主板常见命名规则整理:微星;华硕;技嘉
- 自己定义jquery插件轮播图
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
热门文章
- SpringMVC4返回json
- vs code 添加jquery的智能提示
- 机器学习笔记——K-means
- html input type=file 文件上传; 图片上传; 图片闪烁
- .net得到ip(引)
- [**奇文共赏**补充问题] 据说看五遍能懂的人智商 200
- 和鸿蒙系统合作品牌,华为:明年将有超40家主流品牌、1亿台设备成为鸿蒙系统新入口...
- python数据库模糊查询_原创:Python编写通讯录,支持模糊查询,利用数据库存储...
- 7-4 递增序列 (15 分)
- vs服务器连接xp系统,xp系统远程连接服务器