核心概念——节点/边/Combo——内置节点——Diamond
title: Diamond
order: 4
Diamond
G6 内置了菱形 Diamond 节点,其默认样式如下。标签文本位于菱形中央。
使用方法
如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置。
1 实例化图时全局配置
用户在实例化 Graph 时候可以通过 defaultNode
指定 type
为 'diamond'
,即可使用 diamond
节点。
const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {type: 'diamond',// 其他配置},
});
2 在数据中动态配置
如果需要使不同节点有不同的配置,可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据,也可以通过遍历数据的方式写入。
const data = {nodes: [{id: 'node0',type: 'diamond',... // 其他配置},... // 其他节点],edges: [... // 边]
}
配置项说明
Diamond 节点支持 节点通用配置,下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解:
名称 | 含义 | 类型 | 备注 |
---|---|---|---|
size | 菱形的宽高 | Number / Array | size 为一个数值时,宽高相同 |
style | diamond 默认样式 | Object | Canvas 支持的属性 |
label | 标签文本内容 | String | |
labelCfg | 标签文本配置项 | Object | |
stateStyles | 各状态下的样式 | Object | 详见配置状态样式 |
linkPoints | 视觉上的四个锚点 | Object | 默认不显示,应与 anchorPoints 配合使用。二者区别请看 linkPoints |
icon | 菱形上 icon 配置 | Object | 默认不显示 icon |
样式属性 style
Object 类型。支持 节点通用样式。通过 style
配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style
,使之达到如下图效果。
const data = {nodes: [{x: 100,y: 100,type: 'diamond',label: 'diamond',},],
};
const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {// type: 'diamond', // 数据中已指定 type,这里无需再次指定size: [200, 80],style: {fill: '#bae637',stroke: '#eaff8f',lineWidth: 5,},},
});
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
是真正用于指定该节点相关边的连入位置的「数组」,见 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',},},
});
// ...
图标 icon
Object 类型。通过配置 icon
,可以在圆上显示小图标。
名称 | 含义 | 类型 | 备注 |
---|---|---|---|
show | 是否显示 icon | Boolean |
默认为 false ,不显示
|
width | icon 的宽度 | Number |
默认为 16
|
height | icon 的高度 | Number |
默认为 16
|
img | icon 的地址 | String |
下面代码演示在实例化图时全局配置方法中配置 icon
。
const data = {// ... data 内容
};
const graph = new G6.Graph({// ... 图的其他属性defaultNode: {// ... 节点其他属性icon: {show: true,width: 25,height: 25,},},
});
// ...
核心概念——节点/边/Combo——内置节点——Diamond相关推荐
- G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——内置节点总览
G6 的内置节点包括 circle,rect,ellipse,diamond,triangle,star,image,modelRect.这些内置节点的默认样式分别如下图所示. 本文将概述 G6 中的 ...
- 核心概念——节点/边/Combo——内置节点——Triangle
title: Triangle order: 5 Triangle G6 内置了三角形 Triangle 节点,其默认样式如下.标签文本位于三角形下方. 使用方法 如 内置节点 一节所示,配置节点的 ...
- 核心概念——节点/边/Combo——内置节点——Ellipse
title: Ellipse order: 3 G6 内置了 ellipse 节点,其默认样式如下.标签文本位于椭圆中央. 使用方法 如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置 ...
- G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Rect
G6 内置了 rect 节点,其默认样式如下.标签文本位于矩形中央. 使用方法 如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置. 1 实例化图时全局配置 用户在实例 ...
- G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Circle
G6 内置了圆 Circle 节点,其默认样式如下.标签文本位于圆形中央. 使用方法 如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置. 1 实例化图时全局配置 用户 ...
- 核心概念——节点/边/Combo——内置Combo——内置Combo总览
G6 的内置 Combo 包括 circle 和 rect 两种类型,分别如下图所示. 本文将概述 G6 中的各个内置 Combo 类型.内置 Combo 的通用属性.配置方法.各类型 Combo 详 ...
- Android (内置)预装应用
Android (内置)预装应用 参考Android 系统如何预装第三方应用以及常见问题汇集. 系统开机时会进行应用的加载(或者说安装),所以我们大体上来说就是需要把要内置的apk放到指定目录就行.最 ...
- vivo脑洞大开,竟给手机内置微型无人机!
据外媒报道,中国智能手机供应商vivo推出的带航拍无人机的新手机设计震惊了美国媒体. 报道称,近年来,航拍无人机设计变得越来越复杂和高端,因为它们需要给使用者提供更舒适的飞行体验和更好的相机. 与此同 ...
- SQL常用的内置函数
SQL函数基本概念 函数通常分为内置函数和自定义函数,函数的作用是将经常使用的代码封装起来,需要的时候直接调用,能提高代码效率和可维护性 SQL中的函数一般是在数据上执行的,可以很方便的转换和处理数据 ...
最新文章
- 《可扩展的艺术》内容回顾与作者采访
- Web前端技术分享:什么是块元素?什么是行内元素?
- JavaScriptDOM
- C#实现渐变颜色的Windows窗体控件
- python网络编程---TCP客户端
- java二维数组数字数显次数_【每日一题】118.数组中数字出现的次数
- c语言中按键程序设计,c语言获得键盘的按键
- 转:读“DataBase Sharding at Netlog”,看DataBase Scale Out
- python输出闰年_python写闰年
- [已解决]VitrualBox 启动linux虚拟机后,无法访问网络解决方法
- php开发之Composer包
- SQL语句——处理函数
- 计算机词汇怎么背,如何背诵英语词汇更有效?
- 英文卡通字体_40种独特的卡通和漫画字体
- 机器学习-28-Conditional Generation by RNNAttention(条件生成和注意力机制)
- 【飞凌嵌入式 OK3399-C+开发板试用体验】开箱上电
- HBaseAPI——IDEA操作HBase数据库HBase与Hive的集成
- mysql服务器默认使用用户_在Windows下配置MySql服务器默认使用的用户是
- RFP红色荧光蛋白抗体——Nature、Cell高分文章
- html网页设计期末大作业——生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业
热门文章
- 修改mac的hosts文件
- JDK与JRE及其在Eclipse中的使用
- C++ TR1、TR2与boost的关系
- ActionBarSherlock ViewPagerIndicator
- mysql排序空放后面_python对mysql数据库的增删改查
- 开机动画适配方案_2020 年 4 月前 App 启动画面、屏幕调整需按要求适配,否则存拒审风险!...
- python矩阵旋转函数_Python3算法之十:矩阵旋转
- 为什么parsefloat加出来还是字符串_为什么酒店的包子做的这么好吃?里面加了什么说出来你可能不信...
- java 多线程同步_浅谈Java多线程(状态、同步等)
- Java黑皮书课后题第8章:*8.30(代数:解答线性方程)编写一个方法,解答下面的2*2线性方程组系统