核心概念——节点/边/Combo——内置节点——Ellipse
title: Ellipse
order: 3
G6 内置了 ellipse 节点,其默认样式如下。标签文本位于椭圆中央。
使用方法
如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置。
1 实例化图时全局配置
用户在实例化 Graph 时候可以通过 defaultNode
指定 type
为 'ellipse'
,即可使用 ellipse
节点。
const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {type: 'ellipse',// 其他配置},
});
2 在数据中动态配置
如果需要使不同节点有不同的配置,可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据,也可以通过遍历数据的方式写入。
const data = {nodes: [{id: 'node0',type: 'ellipse',... // 其他配置},... // 其他节点],edges: [... // 边]
}
配置项说明
ellipse 节点支持 节点通用配置,下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解:
名称 | 含义 | 类型 | 备注 |
---|---|---|---|
size | 椭圆的大小 | Number / Array | size 为 Number 时,效果为一个圆形。为 Array 时,size[0] 为椭圆长轴长度,size[1] 为椭圆短轴长度 |
style | 椭圆的默认样式 | 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: 'ellipse',label: 'ellipse',},],
};
const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {// type: 'ellipse', // 在数据中已经指定 type,这里可以不用再此指定size: [130, 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: {offset: 20,style: {fill: '#9254de',fontSize: 18,},},},
});
// ...
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 |
基于上面 样式属性 style 中的代码,下面代码在 defaultNode
中增加了 icon
配置项进行图标的配置,使之达到如下图效果。
const data = {// ... data 内容
};
const graph = new G6.Graph({// ... 图的其他属性defaultNode: {// ... 节点其他属性icon: {show: true,},},
});
// ...
核心概念——节点/边/Combo——内置节点——Ellipse相关推荐
- G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——内置节点总览
G6 的内置节点包括 circle,rect,ellipse,diamond,triangle,star,image,modelRect.这些内置节点的默认样式分别如下图所示. 本文将概述 G6 中的 ...
- 核心概念——节点/边/Combo——内置节点——Triangle
title: Triangle order: 5 Triangle G6 内置了三角形 Triangle 节点,其默认样式如下.标签文本位于三角形下方. 使用方法 如 内置节点 一节所示,配置节点的 ...
- 核心概念——节点/边/Combo——内置节点——Diamond
title: Diamond order: 4 Diamond G6 内置了菱形 Diamond 节点,其默认样式如下.标签文本位于菱形中央. 使用方法 如 内置节点 一节所示,配置节点的方式有两 ...
- 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中的函数一般是在数据上执行的,可以很方便的转换和处理数据 ...
最新文章
- Linux静态IP设置
- ARM 架构(V7,V8),和ARM内核区别,从ARM7,ARM9到Cortex-A7,A8,A9,A12,A15到Cortex-A53,A57
- java客户端操作zookeeper:对某个节点进行持续监听代码示例
- NSLog (Log信息的输出)
- leetcode 419. Battleships in a Board | 419. 甲板上的战舰(二维矩阵DFS经典“感染”思路)
- Liferay SSO CAS 集成
- 实现页面内多个表格在滚动时,表头浮动的效果(是同时多个表格哟)
- js返回上级页面的方法(亲测)
- 数据安全治理面临哪些挑战
- Java学习路线(转)
- 财务系统如何避免对账时一分钱误差?
- HTML引用高德英文地图
- 关于MySQL索引面试题的6连炮!招架的住吗?
- 构建线上线下一体化解决方案,旺小宝以AI赋能房企数智化营销|爱分析访谈
- 猪猪的机器学习笔记(一)微积分和概率论
- 《惊奇队长》全球IMAX影院劲收3610万美元
- 第一篇博文 开启我的互联网世界【立志学好C语言的兵哥哥】
- 26.Vue列表渲染中key的作用与原理(内含虚拟DOM的对比算法详解)
- 关于继承与造型的一点浅薄的认知(梦开始的地方)
- 使用git同步本地和线上环境代码
热门文章
- 迭代器: isinstance
- 可视化之Earth NullSchool
- 一群猴子排成一圈,按1,2,...,n依次编号。然后从第1只开始数,数到第m只,把它踢出圈...
- android 制作的精美闹钟
- asp.net MVC 中使用dataannotation验证Model
- InnoDB与MyISAM的六大区别(转)
- linux下父子进程共享socket,多进程共享socket(Linux,Win32)
- java中队列的类是什么意思_java中LinkedList集合类实现栈和队列要注意什么?
- 算法工程师_浅谈算法工程师的职业定位与发展
- linux服务器管理书籍,linux服务器管理