Neo4j g6
来自ling
链接
https://antv-g6.gitee.io/zh/docs/manual/introduction
https://antv-g6.gitee.io/zh/docs/api/Graph
https://antv-g6.gitee.io/zh/examples/gallery
https://antv-g6.gitee.io/zh/examples/case/largeGraph#index
https://antv-graphin.gitee.io/zh
umi pro
npm install yarn tyarn -g tyarn install create-umi -g tyarn create umi myapp tyarn install
tyarn add @ant-design/pro-form --save
tyarn add @ant-design/pro-layout --save
tyarn add @ant-design/pro-table --save
tyarn add @ant-design/pro-list --save
tyarn add @ant-design/pro-descriptions --save
tyarn add @ant-design/pro-card --save
tyarn add @ant-design/pro-skeleton --save
tyarn add @ant-design/pro-form @ant-design/pro-layout @ant-design/pro-table @ant-design/pro-list @ant-design/pro-descriptions @ant-design/pro-card @ant-design/pro-skeleton --savetyarn i18n-remove
g6
yarn add @antv/g6 --save
graphin
yarn add @antv/graphin@latest @antv/graphin-components@latest @antv/graphin-icons --save
{
nodes: [
{
id: 'node-0',
x: 200,
y: 240,
style: {
// 节点的主要形状，即圆形容器，可以在这里设置节点的大小，border，填充色
keyshape: {
/** 容器的宽度 */
lineWidth: 3,
/** 节点的大小 */
size: 80,
/** 包围边颜色 */
stroke: parimaryColor,
/** 填充色 */
fill: Utils.hexToRgbaToHex(parimaryColor, 0.2),
/** 透明度 */
opacity: 1,
/** 鼠标样式 */
cursor: 'pointer',
},
// 是节点的标签，可以设置标签的值 和样式：放置方位，大小，字体颜色，偏移位置
label: {
/** label的名称 */
value: '节点-0',
/** 展示位置 'top' | 'bottom' | 'left' | 'right' | 'center'; */
position: 'top',
/** 文本填充色 */
fill: '#000',
/** 文本大小 */
fontSize: 16,
fontFamily: 'normal',
textAlign: 'center',
/** 文本在各自方向上的偏移量，主要为了便于调整文本位置 */
offset: 0,
},
// 是节点的中心 ICON 区域，icon 可以是图片，可以是文本，也可以是字体图标。
icon: {
/** 类型可以为字体图标，可以为网络图片，可以为纯文本 'font' | 'image' | 'text' */
type: 'font',
/** 根据类型，填写对应的值 */
value: icons.user,
/** 图标大小 */
size: 40,
/** 字体图标的填充色 */
fill: parimaryColor,
/** 字体Family */
fontFamily: 'graphin',
},
// 节点的徽标区域，是一个数组，可以分别在不同方位放置，其内容区域可以是文本，数字，也可以是图标。
badges: [
{
/** 放置的位置，ef：LT（left top）左上角 */
position: 'RT',
/** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
type: 'text',
value: '10',
// type = image 时生效，表示图片的宽度和高度
size: [25, 25],
/** 徽标填充色 */
fill: Utils.hexToRgbaToHex(parimaryColor, 1),
/** 徽标描边色 */
stroke: '',
/** 徽标内文本的颜色 */
color: '#fff',
fontSize: 14,
fontFamily: '',
// badge 中文本距离四周的偏移量
padding: 0,
// badge 在 x 和 y 方向上的偏移量
offset: [0, 0],
},
{
/** 放置的位置，ef：LT（left top）左上角 */
position: 'LB',
/** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
type: 'text',
value: 'Pin',
// type = image 时生效，表示图片的宽度和高度
size: [25, 25],
/** 徽标填充色 */
fill: Utils.hexToRgbaToHex(parimaryColor, 1),
/** 徽标描边色 */
stroke: '',
/** 徽标内文本的颜色 */
color: '#fff',
fontSize: 12,
fontFamily: '',
// badge 中文本距离四周的偏移量
padding: 0,
// badge 在 x 和 y 方向上的偏移量
offset: [0, 0],
},
],
// 节点的光环，在节点交互过程中（hover，selected，disabled，active）等，可以打开光环，默认是隐藏的，也可以自定义
halo: {
/** 光晕 */
fill: Utils.hexToRgbaToHex(parimaryColor, 0.2),
/** 透明度 */
opacity: 1,
/** 是否展示 */
visible: false,
/** 鼠标Hover上去样式 */
cursor: 'pointer',
},
// 节点的交互样式，默认 Graphin 已经内置了交互样式（即将 halo 图形显示出来），也可以自定义
status: {
hover: {
halo: {
visible: true,
},
},
selected: {
halo: {
visible: true,
},
keyshape: {
lineWidth: 10,
},
},
},
},
},
],
edges: [],
}
