test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 19:58:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

WIP: G6 迁移新官网

Browse Source
This commit is contained in:
baizn 2019-11-12 21:18:46 +08:00
parent 8012f2f9ee
commit 19c2e6a5ce
12 changed files with 453 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
examples/interaction/label/demo/changeImg.js
View File

@ -8,14 +8,14 @@ import G6 from '@antv/g6';
*/
const img = new Image();
img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566553535233&di=b0b17eeea7bd7356a6f42ebfd48e9441&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F64%2F29%2F01300543361379145388299988437_s.jpg';
img.src = 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg';
// 点击图片节点，切换背景图片
const img2 = new Image();
img2.src = 'http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg';
img2.src = 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wAmHQJbNVdwAAAAAAAAAAABkARQnAQ';
const data = {
nodes: [{
x: 100,
x: 150,
y: 100,
shape: 'circleNode',
label: 'circle',
@ -24,11 +24,12 @@ const data = {
position: 'center'
}
}, {
x: 400,
x: 350,
y: 100,
shape: 'image',
id: 'node2',
img: img.src,
size: [ 120, 60 ],
label: '头像',
style: {
cursor: 'pointer'

4
examples/interaction/label/demo/meta.json
View File

@ -7,12 +7,12 @@
{
"filename": "update.js",
"title": "更新节点或边上的标签",
"screenshot": "https://cdn.nlark.com/yuque/0/2019/gif/174835/1552990627466-92a4ce23-79b2-4930-ab05-6478b56ce880.gif"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ztmuSoa1tkkAAAAAAAAAAABkARQnAQ"
},
{
"filename": "changeImg.js",
"title": "切换节点背景图片",
"screenshot": "https://cdn.nlark.com/yuque/0/2019/gif/174835/1552990627466-92a4ce23-79b2-4930-ab05-6478b56ce880.gif"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*fDMtSauIZ0MAAAAAAAAAAABkARQnAQ"
}
]
}

15
examples/interaction/label/demo/update.js
View File

@ -36,14 +36,21 @@ const graph = new G6.Graph({
color: '#bae7ff',
lineAppendWidth: 3
},
defaultNode: {
style: {
fill: '#40a9ff'
}
},
nodeStateStyles: {
hover: {
fill: 'steelblue'
stroke: '#bae7ff',
lineWidth: 5,
fillOpacity: 1
}
},
edgeStateStyles: {
hover: {
stroke: '#000',
stroke: '#bae7ff',
lineWidth: 3
}
}
@ -60,7 +67,7 @@ graph.on('node:mouseenter', function(evt) {
label: 'hover 后 ' + model.id,
labelCfg: {
style: {
fill: '#f00'
fill: '#003a8c'
}
}
});
@ -89,7 +96,7 @@ graph.on('edge:mouseenter', function(evt) {
label: 'hover 后',
labelCfg: {
style: {
fill: '#f00'
fill: '#003a8c'
}
}
});

1
examples/interaction/loadData/demo/loadTreeData.js
View File

@ -56,6 +56,7 @@ graph.edge(function() {
color: '#A3B1BF'
};
});
const data = {
isRoot: true,
id: 'Root',

106
examples/interaction/nodeGroup/demo/circle.js Normal file
View File

@ -0,0 +1,106 @@
import G6 from '@antv/g6';
/**
* 该案例演示以下功能：
* 1、渲染群组所需要的数据结构；
* 2、如何拖动一个群组；
* 3、将节点从群组中拖出；
* 4、将节点拖入到某个群组中；
* 5、拖出拖入节点后动态改变群组大小。
*/
const graph = new G6.Graph({
container: 'container',
width: 800,
height: 600,
defaultNode: {
shape: 'circle',
style: {
fill: '#69c0ff'
}
},
defaultEdge: {
color: '#bae7ff'
},
modes: {
default: [ 'drag-canvas', 'drag-group', 'drag-node-with-group', 'collapse-expand-group' ]
}
});
const data = {
nodes: [
{
id: 'node1',
label: 'node1-group1',
groupId: 'group1',
x: 100,
y: 100
},
{
id: 'node2',
label: 'node2-group2',
groupId: 'group1',
x: 150,
y: 200
},
{
id: 'node3',
label: 'node3-group2',
groupId: 'group2',
x: 300,
y: 200
},
{
id: 'node10',
label: 'node10-p2',
groupId: 'p2',
x: 300,
y: 310
}
],
edges: [
{
source: 'node1',
target: 'node2'
},
{
source: 'node2',
target: 'node3'
},
{
source: 'node1',
target: 'node3'
},
{
source: 'node6',
target: 'node1'
}
],
groups: [
{
id: 'group1',
title: {
text: '我的群组1',
stroke: '#444',
offsetX: -20,
offsetY: 30
}
},
{
id: 'group2',
title: {
text: '群组2',
stroke: '#444',
offsetX: -20,
offsetY: 30
},
parentId: 'p2'
},
{
id: 'p2',
title: '群组3'
}
]
};
graph.data(data);
graph.render();

18
examples/interaction/nodeGroup/demo/meta.json Normal file
View File

@ -0,0 +1,18 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "circle.js",
"title": "圆形分组",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0L2cTJVfPSwAAAAAAAAAAABkARQnAQ"
},
{
"filename": "rect.js",
"title": "矩形分组",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*g_ntQK8Oz3cAAAAAAAAAAABkARQnAQ"
}
]
}

103
examples/interaction/nodeGroup/demo/rect.js Normal file
View File

@ -0,0 +1,103 @@
import G6 from '@antv/g6';
/**
* 该案例演示以下功能：
* 1、渲染群组所需要的数据结构；
* 2、如何拖动一个群组；
* 3、将节点从群组中拖出；
* 4、将节点拖入到某个群组中；
* 5、拖出拖入节点后动态改变群组大小。
*/
const graph = new G6.Graph({
container: 'container',
width: 800,
height: 600,
defaultNode: {
shape: 'circle',
style: {
fill: '#69c0ff'
}
},
defaultEdge: {
color: '#bae7ff'
},
modes: {
default: [ 'drag-canvas', 'drag-group', 'drag-node-with-group', 'collapse-expand-group' ]
},
groupType: 'rect'
});
const data = {
nodes: [
{
id: 'node1',
label: 'node1-group1',
groupId: 'group1',
x: 100,
y: 100
},
{
id: 'node2',
label: 'node2-group2',
groupId: 'group1',
x: 150,
y: 200
},
{
id: 'node3',
label: 'node3-group2',
groupId: 'group2',
x: 300,
y: 200
},
{
id: 'node10',
label: 'node10-p2',
groupId: 'p2',
x: 300,
y: 310
}
],
edges: [
{
source: 'node1',
target: 'node2'
},
{
source: 'node2',
target: 'node3'
},
{
source: 'node1',
target: 'node3'
},
{
source: 'node6',
target: 'node1'
}
],
groups: [
{
id: 'group1',
title: {
text: '我的群组1',
stroke: '#444'
}
},
{
id: 'group2',
title: {
text: '群组2',
stroke: '#444'
},
parentId: 'p2'
},
{
id: 'p2',
title: '群组3'
}
]
};
graph.data(data);
graph.render();

12
examples/interaction/nodeGroup/index.zh.md Normal file
View File

@ -0,0 +1,12 @@
---
title: 节点分组
order: 0
redirect_from:
- /zh/examples
---
G6 支持节点分组。
## 使用指南
G6 默认支持 `circle` 和 `rect` 两种类型的节点分组，可用于团伙导航或聚类分析上面。

110
examples/shape/label/demo/labelLen.js Normal file
View File

@ -0,0 +1,110 @@
/**
* 该案例演示当label太长时候，指定多少个字符后显示省略号。
* 有两种方式进行处理：
* 1、从数据中处理，处理完以后再进行渲染；
* 2、自定义节点或边时，进行处理：
* group.addShape('text', {
* attrs: {
* text: fittingString(cfg.label, 50, 12),
* ...
* }
* })
*
*/
import G6 from '@antv/g6';
/**
* 计算字符串的长度
* @param {string} str 指定的字符串
* @return {number} 字符串长度
*/
const calcStrLen = str => {
let len = 0;
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
len++;
} else {
len += 2;
}
}
return len;
};
/**
* 计算显示的字符串
* @param {string} str 要裁剪的字符串
* @param {number} maxWidth 最大宽度
* @param {number} fontSize 字体大小
* @return {string} 处理后的字符串
*/
const fittingString = (str, maxWidth, fontSize) => {
const fontWidth = fontSize * 1.3; // 字号+边距
maxWidth = maxWidth * 2; // 需要根据自己项目调整
const width = calcStrLen(str) * fontWidth;
const ellipsis = '…';
if (width > maxWidth) {
const actualLen = Math.floor((maxWidth - 10) / fontWidth);
const result = str.substring(0, actualLen) + ellipsis;
return result;
}
return str;
};
const data = {
nodes: [{
x: 100,
y: 100,
label: '这个文案有点长',
id: 'node1',
labelCfg: {
position: 'bottom'
},
anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
}, {
x: 300,
y: 100,
label: '这个文案也有点长',
id: 'node2',
labelCfg: {
position: 'bottom'
},
anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
}],
edges: [{
source: 'node1',
target: 'node2',
label: 'label上面这个文本太长了我需要换行',
labelCfg: {
refY: 20
},
style: {
endArrow: true
}
}]
};
const graph = new G6.Graph({
container: 'container',
width: 500,
height: 500,
defaultNode: {
style: {
fill: '#69c0ff'
}
},
defaultEdge: {
color: '#bae7ff'
}
});
// 直接修改原生数据中的label字段
data.nodes.forEach(function(node) {
node.label = fittingString(node.label, 25, 12);
});
data.edges.forEach(function(edge) {
edge.label = fittingString(edge.label, 100, 12);
});
graph.data(data);
graph.render();

55
examples/shape/label/demo/labelLen1.js Normal file
View File

@ -0,0 +1,55 @@
import G6 from '@antv/g6';
/**
* 该案例演示当label太长时候，如何换行显示。
* by 镜曦。
*
*/
const data = {
nodes: [{
x: 100,
y: 100,
label: '这个文案\n有点长',
id: 'node1',
labelCfg: {
position: 'bottom'
},
anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
}, {
x: 300,
y: 100,
label: '这个文案\n也有点长',
id: 'node2',
labelCfg: {
position: 'bottom'
},
anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
}],
edges: [{
source: 'node1',
target: 'node2',
label: 'label上面这个文本太长了\n我需要换行',
labelCfg: {
refY: 20
},
style: {
endArrow: true
}
}]
};
const graph = new G6.Graph({
container: 'container',
width: 500,
height: 500,
defaultNode: {
shape: 'rect',
style: {
fill: '#69c0ff'
}
},
defaultEdge: {
color: '#bae7ff'
}
});
graph.data(data);
graph.render();

18
examples/shape/label/demo/meta.json Normal file
View File

@ -0,0 +1,18 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "labelLen.js",
"title": "使用JS处理文本超长",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*qef2QYxoWvUAAAAAAAAAAABkARQnAQ"
},
{
"filename": "labelLen1.js",
"title": "使用换行符处理文本超长",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kB3wSZnPnLUAAAAAAAAAAABkARQnAQ"
}
]
}

12
examples/shape/label/index.zh.md Normal file
View File

@ -0,0 +1,12 @@
---
title: 文本超长
order: 4
redirect_from:
- /zh/examples
---
G6 中文本的处理。
## 使用指南
节点或边上的文本超长时，可以通过使用 JS 来计算文本长度，也可以通过使用 `\n` 来进行换行。