mirror of
https://gitee.com/antv/g6.git
synced 2024-12-02 19:58:46 +08:00
chore: update dumi themem antv of master (#5187)
* chore: update dumi-theme-antv of master branch * chore: add 5.x link * refactor: remove storebook demos which cause build error * fix: add missed tslib
This commit is contained in:
Aaron
GitHub
parent
304db350dc
commit
5503674c16
@ -62,7 +62,8 @@
|
||||
"dependencies": {
|
||||
"@antv/g-base": "^0.5.1",
|
||||
"@antv/g6-core": "0.8.23",
|
||||
"@antv/util": "~2.0.5"
|
||||
"@antv/util": "~2.0.5",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antv/g6": "4.5.1",
|
||||
|
||||
@ -40,7 +40,6 @@
|
||||
"ci": "npm run build && npm run coverage",
|
||||
"clean": "rimraf es esm lib dist",
|
||||
"coverage": "jest --coverage",
|
||||
"demos": "start-storybook -p 8080 -c .storybook",
|
||||
"doc": "rimraf apis && typedoc",
|
||||
"lint": "eslint --ext .js,.jsx,.ts,.tsx --format=pretty \"./\"",
|
||||
"lint:src": "eslint --ext .ts --format=pretty \"./src\"",
|
||||
@ -90,4 +89,4 @@
|
||||
"webpack": "^4.41.4",
|
||||
"webpack-cli": "^3.3.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -41,7 +41,6 @@
|
||||
"ci": "npm run build && npm run coverage",
|
||||
"clean": "rimraf es esm lib dist",
|
||||
"coverage": "jest --coverage",
|
||||
"demos": "start-storybook -p 8080 -c .storybook",
|
||||
"doc": "rimraf apis && typedoc",
|
||||
"lint": "eslint --ext .js,.jsx,.ts,.tsx --format=pretty \"./\"",
|
||||
"lint:src": "eslint --ext .ts --format=pretty \"./src\"",
|
||||
@ -87,16 +86,13 @@
|
||||
"d3-force": "^2.0.1",
|
||||
"dagre": "^0.8.5",
|
||||
"insert-css": "^2.0.0",
|
||||
"ml-matrix": "^6.5.0"
|
||||
"ml-matrix": "^6.5.0",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.7",
|
||||
"@babel/plugin-proposal-class-properties": "^7.1.0",
|
||||
"@babel/preset-react": "^7.7.4",
|
||||
"@storybook/addon-actions": "^5.2.8",
|
||||
"@storybook/addon-info": "^5.2.8",
|
||||
"@storybook/addon-knobs": "^5.2.8",
|
||||
"@storybook/react": "^5.2.8",
|
||||
"@turf/turf": "^5.1.6",
|
||||
"@types/jest": "^25.2.1",
|
||||
"@types/node": "13.11.1",
|
||||
@ -124,4 +120,4 @@
|
||||
"webpack-cli": "^3.3.10",
|
||||
"worker-loader": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,131 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Graph } from '../../../src';
|
||||
|
||||
let graph = null;
|
||||
const data = {
|
||||
nodes: [
|
||||
{ id: 'node0', size: 50 },
|
||||
{ id: 'node1', size: 30 },
|
||||
{ id: 'node2', size: 30 },
|
||||
{ id: 'node3', size: 30 },
|
||||
{ id: 'node4', size: 30, isLeaf: true },
|
||||
{ id: 'node5', size: 30, isLeaf: true },
|
||||
{ id: 'node6', size: 15, isLeaf: true },
|
||||
{ id: 'node7', size: 15, isLeaf: true },
|
||||
{ id: 'node8', size: 15, isLeaf: true },
|
||||
{ id: 'node9', size: 15, isLeaf: true },
|
||||
{ id: 'node10', size: 15, isLeaf: true },
|
||||
{ id: 'node11', size: 15, isLeaf: true },
|
||||
{ id: 'node12', size: 15, isLeaf: true },
|
||||
{ id: 'node13', size: 15, isLeaf: true },
|
||||
{ id: 'node14', size: 15, isLeaf: true },
|
||||
{ id: 'node15', size: 15, isLeaf: true },
|
||||
{ id: 'node16', size: 15, isLeaf: true },
|
||||
],
|
||||
edges: [
|
||||
{ source: 'node0', target: 'node1' },
|
||||
{ source: 'node0', target: 'node2' },
|
||||
{ source: 'node0', target: 'node3' },
|
||||
{ source: 'node0', target: 'node4' },
|
||||
{ source: 'node0', target: 'node5' },
|
||||
{ source: 'node1', target: 'node6' },
|
||||
{ source: 'node1', target: 'node7' },
|
||||
{ source: 'node2', target: 'node8' },
|
||||
{ source: 'node2', target: 'node9' },
|
||||
{ source: 'node2', target: 'node10' },
|
||||
{ source: 'node2', target: 'node11' },
|
||||
{ source: 'node2', target: 'node12' },
|
||||
{ source: 'node2', target: 'node13' },
|
||||
{ source: 'node3', target: 'node14' },
|
||||
{ source: 'node3', target: 'node15' },
|
||||
{ source: 'node3', target: 'node16' },
|
||||
],
|
||||
};
|
||||
const nodes = data.nodes;
|
||||
|
||||
const HullDemo = () => {
|
||||
const container = React.useRef();
|
||||
useEffect(() => {
|
||||
if (!graph) {
|
||||
graph = new Graph({
|
||||
container: container.current as string | HTMLElement,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'lasso-select'],
|
||||
},
|
||||
layout: {
|
||||
type: 'force',
|
||||
preventOverlap: true,
|
||||
linkDistance: (d) => {
|
||||
if (d.source.id === 'node0') {
|
||||
return 300;
|
||||
}
|
||||
return 60;
|
||||
},
|
||||
nodeStrength: (d) => {
|
||||
if (d.isLeaf) {
|
||||
return -50;
|
||||
}
|
||||
return -10;
|
||||
},
|
||||
edgeStrength: (d) => {
|
||||
if (d.source.id === 'node1' || d.source.id === 'node2' || d.source.id === 'node3') {
|
||||
return 0.7;
|
||||
}
|
||||
return 0.1;
|
||||
},
|
||||
},
|
||||
});
|
||||
graph.data({
|
||||
nodes,
|
||||
edges: data.edges.map(function (edge, i) {
|
||||
edge['id'] = 'edge' + i;
|
||||
return Object.assign({}, edge);
|
||||
}),
|
||||
});
|
||||
graph.render();
|
||||
|
||||
let centerNodes = graph.getNodes().filter((node) => !node.getModel().isLeaf);
|
||||
|
||||
graph.on('afterlayout', () => {
|
||||
const hull1 = graph.createHull({
|
||||
id: 'centerNode-hull',
|
||||
type: 'bubble',
|
||||
members: centerNodes,
|
||||
padding: 10,
|
||||
});
|
||||
|
||||
const hull2 = graph.createHull({
|
||||
id: 'leafNode-hull1',
|
||||
members: ['node6', 'node7'],
|
||||
padding: 10,
|
||||
style: {
|
||||
fill: 'lightgreen',
|
||||
stroke: 'green',
|
||||
},
|
||||
});
|
||||
|
||||
const hull3 = graph.createHull({
|
||||
id: 'leafNode-hull2',
|
||||
members: ['node8', 'node9', 'node10', 'node11', 'node12'],
|
||||
padding: 10,
|
||||
style: {
|
||||
fill: 'lightgreen',
|
||||
stroke: 'green',
|
||||
},
|
||||
});
|
||||
|
||||
graph.on('afterupdateitem', (e) => {
|
||||
hull1.updateData(hull1.members);
|
||||
hull2.updateData(hull2.members);
|
||||
hull3.updateData(hull3.members);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return <div ref={container}></div>;
|
||||
};
|
||||
|
||||
export default HullDemo;
|
||||
@ -1,211 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Graph } from '../../../src';
|
||||
|
||||
let graph = null;
|
||||
const data = {
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
label: '公司1',
|
||||
group: 1,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: '公司2',
|
||||
group: 1,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
label: '公司3',
|
||||
group: 1,
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
label: '公司4',
|
||||
group: 1,
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
label: '公司5',
|
||||
group: 2,
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
label: '公司6',
|
||||
group: 2,
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
label: '公司7',
|
||||
group: 2,
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
label: '公司8',
|
||||
group: 2,
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
label: '公司9',
|
||||
group: 2,
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
source: '1',
|
||||
target: '1',
|
||||
type: 'loop',
|
||||
},
|
||||
{
|
||||
source: '2',
|
||||
target: '2',
|
||||
type: 'loop',
|
||||
},
|
||||
{
|
||||
source: '1',
|
||||
target: '2',
|
||||
data: {
|
||||
type: 'A',
|
||||
amount: '100,000 元',
|
||||
date: '2019-08-03',
|
||||
},
|
||||
},
|
||||
{
|
||||
source: '1',
|
||||
target: '3',
|
||||
data: {
|
||||
type: 'B',
|
||||
amount: '100,000 元',
|
||||
date: '2019-08-03',
|
||||
},
|
||||
},
|
||||
{
|
||||
source: '2',
|
||||
target: '5',
|
||||
data: {
|
||||
type: 'C',
|
||||
amount: '100,000 元',
|
||||
date: '2019-08-03',
|
||||
},
|
||||
},
|
||||
{
|
||||
source: '5',
|
||||
target: '6',
|
||||
data: {
|
||||
type: 'B',
|
||||
amount: '100,000 元',
|
||||
date: '2019-08-03',
|
||||
},
|
||||
},
|
||||
{
|
||||
source: '3',
|
||||
target: '4',
|
||||
data: {
|
||||
type: 'C',
|
||||
amount: '100,000 元',
|
||||
date: '2019-08-03',
|
||||
},
|
||||
},
|
||||
{
|
||||
source: '4',
|
||||
target: '7',
|
||||
data: {
|
||||
type: 'B',
|
||||
amount: '100,000 元',
|
||||
date: '2019-08-03',
|
||||
},
|
||||
},
|
||||
{
|
||||
source: '1',
|
||||
target: '8',
|
||||
data: {
|
||||
type: 'B',
|
||||
amount: '100,000 元',
|
||||
date: '2019-08-03',
|
||||
},
|
||||
},
|
||||
{
|
||||
source: '1',
|
||||
target: '9',
|
||||
data: {
|
||||
type: 'C',
|
||||
amount: '100,000 元',
|
||||
date: '2019-08-03',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const HullDemo = () => {
|
||||
const container = React.useRef();
|
||||
useEffect(() => {
|
||||
if (!graph) {
|
||||
graph = new Graph({
|
||||
container: container.current as string | HTMLElement,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
|
||||
},
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
const hull1 = graph.createHull({
|
||||
id: 'hull1',
|
||||
type: 'smooth-convex',
|
||||
padding: 15,
|
||||
members: graph.getNodes().filter((node) => node.getModel().group === 1),
|
||||
});
|
||||
const hull2 = graph.createHull({
|
||||
id: 'hull2',
|
||||
members: graph.getNodes().filter((node) => node.getModel().group === 2),
|
||||
nonMembers: graph.getNodes().filter((node) => node.getModel().group === 1),
|
||||
padding: 15,
|
||||
type: 'bubble',
|
||||
style: {
|
||||
fill: 'pink',
|
||||
stroke: 'red',
|
||||
},
|
||||
update: 'drag',
|
||||
});
|
||||
|
||||
graph.on('canvas:contextmenu', (ev) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const item = graph.addItem('node', {
|
||||
x: ev.x,
|
||||
y: ev.y,
|
||||
id: Math.random(),
|
||||
group: 2,
|
||||
});
|
||||
hull2.addMember(item);
|
||||
});
|
||||
|
||||
graph.on('afterupdateitem', (e) => {
|
||||
if (hull1.members.indexOf(e.item) > -1 || hull1.nonMembers.indexOf(e.item) > -1) {
|
||||
hull1.updateData(hull1.members);
|
||||
}
|
||||
});
|
||||
|
||||
graph.on('node:dragend', (e) => {
|
||||
const item = e.item;
|
||||
const memberIdx = hull2.members.indexOf(item);
|
||||
if (memberIdx > -1) {
|
||||
// 如果移出原hull范围，则去掉
|
||||
if (!hull2.contain(item)) {
|
||||
hull2.removeMember(item);
|
||||
} else {
|
||||
hull2.updateData(hull2.members);
|
||||
}
|
||||
} else {
|
||||
if (hull2.contain(item)) hull2.addMember(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return <div ref={container}></div>;
|
||||
};
|
||||
|
||||
export default HullDemo;
|
||||
@ -1,10 +0,0 @@
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import Hull from './component/hull';
|
||||
import InteractiveHull from './component/interactiveHull';
|
||||
|
||||
export default { title: 'Hull' };
|
||||
|
||||
storiesOf('Hull', module)
|
||||
.add('Hull', () => <Hull />)
|
||||
.add('Interactive hull', () => <InteractiveHull />);
|
||||
@ -1,106 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import G6 from '../../../src';
|
||||
import { IGraph } from '../../../src/interface/graph';
|
||||
|
||||
let graph: IGraph = null;
|
||||
|
||||
const Erdos = () => {
|
||||
const container = React.useRef();
|
||||
useEffect(() => {
|
||||
if (!graph) {
|
||||
const graphSize = 800;
|
||||
const graph = new G6.Graph({
|
||||
container: container.current as string | HTMLElement,
|
||||
width: graphSize,
|
||||
height: graphSize,
|
||||
// layout: {
|
||||
// type: 'force',
|
||||
// nodeStrength: -10
|
||||
// },
|
||||
defaultNode: {
|
||||
size: 2,
|
||||
style: {
|
||||
fill: '#C6E5FF',
|
||||
stroke: '#5B8FF9',
|
||||
lineWidth: 0.3,
|
||||
},
|
||||
labelCfg: {
|
||||
style: {
|
||||
fontSize: 3,
|
||||
},
|
||||
position: 'right',
|
||||
offset: 1,
|
||||
},
|
||||
},
|
||||
defaultEdge: {
|
||||
size: 0.1,
|
||||
color: '#333',
|
||||
},
|
||||
nodeStateStyles: {
|
||||
hover: {
|
||||
lineWidth: 2,
|
||||
stroke: '#333',
|
||||
fill: 'steelblue',
|
||||
r: 6,
|
||||
},
|
||||
},
|
||||
modes: {
|
||||
default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
|
||||
},
|
||||
});
|
||||
|
||||
// fetch('https://gw.alipayobjects.com/os/basement_prod/e5a5f1c5-c5aa-4f9c-9769-d67a03915478.json')
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/9e119b99-2580-43be-a8db-f55bb682c881.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach((node) => {
|
||||
node.label = undefined;
|
||||
node.size = undefined;
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
/* normalize */
|
||||
let cx = 0,
|
||||
cy = 0;
|
||||
let minX = Infinity,
|
||||
maxX = -Infinity,
|
||||
minY = Infinity,
|
||||
maxY = -Infinity;
|
||||
data.nodes.forEach((node) => {
|
||||
cx += node.x;
|
||||
cy += node.y;
|
||||
if (minX > node.x) minX = node.x;
|
||||
if (minY > node.y) minY = node.y;
|
||||
if (maxX < node.x) maxX = node.x;
|
||||
if (maxY < node.y) maxY = node.y;
|
||||
});
|
||||
const scale = maxX - minX > maxY - minY ? maxX - minX : maxY - minY;
|
||||
cx /= data.nodes.length;
|
||||
cy /= data.nodes.length;
|
||||
data.nodes.forEach((node) => {
|
||||
node.x -= cx;
|
||||
node.y -= cy;
|
||||
node.x = (graphSize * node.x) / scale + graphSize / 2;
|
||||
node.y = (graphSize * node.y) / scale + graphSize / 2;
|
||||
});
|
||||
graph.positionsAnimate();
|
||||
});
|
||||
graph.on('node:click', (evt) => {
|
||||
const { item } = evt;
|
||||
item.toFront();
|
||||
graph.setItemState(item, 'hover', true);
|
||||
});
|
||||
}
|
||||
|
||||
// graph.on('node:mouseleave', evt => {
|
||||
// const { item } = evt
|
||||
// graph.setItemState(item, 'hover', false)
|
||||
// })
|
||||
});
|
||||
return <div ref={container}></div>;
|
||||
};
|
||||
|
||||
export default Erdos;
|
||||
@ -1,159 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import G6 from '../../../src';
|
||||
import { IGraph } from '../../../src/interface/graph';
|
||||
|
||||
let graph: IGraph = null;
|
||||
|
||||
const mapNodeSize = (nodes, propertyName, visualRange) => {
|
||||
let minp = 9999999999;
|
||||
let maxp = -9999999999;
|
||||
nodes.forEach((node) => {
|
||||
node[propertyName] = Math.pow(node[propertyName], 1 / 3);
|
||||
minp = node[propertyName] < minp ? node[propertyName] : minp;
|
||||
maxp = node[propertyName] > maxp ? node[propertyName] : maxp;
|
||||
});
|
||||
const rangepLength = maxp - minp;
|
||||
const rangevLength = visualRange[1] - visualRange[0];
|
||||
nodes.forEach((node) => {
|
||||
node.size = ((node[propertyName] - minp) / rangepLength) * rangevLength + visualRange[0];
|
||||
});
|
||||
};
|
||||
|
||||
const Eva = () => {
|
||||
const container = React.useRef();
|
||||
useEffect(() => {
|
||||
if (!graph) {
|
||||
const graphSize = 800;
|
||||
const graph = new G6.Graph({
|
||||
container: container.current as string | HTMLElement,
|
||||
width: graphSize,
|
||||
height: graphSize,
|
||||
// layout: {
|
||||
// type: 'force',
|
||||
// nodeStrength: -10
|
||||
// },
|
||||
defaultNode: {
|
||||
size: 2,
|
||||
style: {
|
||||
fill: '#C6E5FF',
|
||||
stroke: '#5B8FF9',
|
||||
lineWidth: 0.3,
|
||||
},
|
||||
labelCfg: {
|
||||
style: {
|
||||
fontSize: 3,
|
||||
},
|
||||
position: 'right',
|
||||
offset: 1,
|
||||
},
|
||||
},
|
||||
defaultEdge: {
|
||||
size: 0.1,
|
||||
color: '#333',
|
||||
type: 'line',
|
||||
},
|
||||
nodeStateStyles: {
|
||||
selected: {
|
||||
fill: 'steelblue',
|
||||
stroke: '#000',
|
||||
lineWidth: 1,
|
||||
},
|
||||
hover: {
|
||||
fill: 'red',
|
||||
stroke: '#000',
|
||||
lineWidth: 1,
|
||||
},
|
||||
},
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'zoom-canvas',
|
||||
enableOptimize: true,
|
||||
},
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
enableOptimize: true,
|
||||
},
|
||||
'drag-node',
|
||||
'brush-select',
|
||||
], // 'drag-canvas',
|
||||
},
|
||||
});
|
||||
graph.get('canvas').set('localRefresh', true);
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b9730ff-0850-46ff-84d0-1d4afecd43e6.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach((node) => {
|
||||
node.label = node.olabel;
|
||||
node.labelCfg.style = {
|
||||
fontSize: 1.3,
|
||||
};
|
||||
node.degree = 0;
|
||||
data.edges.forEach((edge) => {
|
||||
if (edge.source === node.id || edge.target === node.id) {
|
||||
node.degree++;
|
||||
}
|
||||
});
|
||||
});
|
||||
// console.log('原始数据', data.nodes.length, data.edges.length);
|
||||
mapNodeSize(data.nodes, 'degree', [1, 15]);
|
||||
// console.log(data.nodes);
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
const { item } = e;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
const { item } = e;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
});
|
||||
|
||||
// console.log('图上数据大小', graph);
|
||||
|
||||
/* normalize */
|
||||
// let cx = 0, cy = 0;
|
||||
// let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
|
||||
// data.nodes.forEach(node => {
|
||||
// cx += node.x;
|
||||
// cy += node.y;
|
||||
// if (minX > node.x) minX = node.x;
|
||||
// if (minY > node.y) minY = node.y;
|
||||
// if (maxX < node.x) maxX = node.x;
|
||||
// if (maxY < node.y) maxY = node.y;
|
||||
// });
|
||||
// const scale = maxX - minX > maxY - minY ? maxX - minX : maxY - minY;
|
||||
// cx /= data.nodes.length;
|
||||
// cy /= data.nodes.length;
|
||||
// data.nodes.forEach(node => {
|
||||
// node.x -= cx;
|
||||
// node.y -= cy;
|
||||
// node.x = graphSize * node.x / scale + graphSize / 2;
|
||||
// node.y = graphSize * node.y / scale + graphSize / 2;
|
||||
// });
|
||||
// graph.positionsAnimate();
|
||||
|
||||
// graph.on('node:dragstart', e => {
|
||||
// graph.setItemState(e.item, 'selected', true);
|
||||
// e.item.toFront();
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// graph.on('node:mouseenter', evt => {
|
||||
// const { item } = evt
|
||||
// graph.setItemState(item, 'hover', true)
|
||||
// })
|
||||
|
||||
// graph.on('node:mouseleave', evt => {
|
||||
// const { item } = evt
|
||||
// graph.setItemState(item, 'hover', false)
|
||||
// })
|
||||
});
|
||||
return <div ref={container}></div>;
|
||||
};
|
||||
|
||||
export default Eva;
|
||||
@ -1,129 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import G6 from '../../../src';
|
||||
import { IGraph } from '../../../src/interface/graph';
|
||||
|
||||
let graph: IGraph = null;
|
||||
|
||||
const mapNodeSize = (nodes, propertyName, visualRange) => {
|
||||
let minp = 9999999999;
|
||||
let maxp = -9999999999;
|
||||
nodes.forEach((node) => {
|
||||
node[propertyName] = Math.pow(node[propertyName], 1 / 3);
|
||||
minp = node[propertyName] < minp ? node[propertyName] : minp;
|
||||
maxp = node[propertyName] > maxp ? node[propertyName] : maxp;
|
||||
});
|
||||
const rangepLength = maxp - minp;
|
||||
const rangevLength = visualRange[1] - visualRange[0];
|
||||
nodes.forEach((node) => {
|
||||
node.size = ((node[propertyName] - minp) / rangepLength) * rangevLength + visualRange[0];
|
||||
});
|
||||
};
|
||||
|
||||
const NetScience = () => {
|
||||
const container = React.useRef();
|
||||
useEffect(() => {
|
||||
if (!graph) {
|
||||
const graphSize = 800;
|
||||
const graph = new G6.Graph({
|
||||
container: container.current as string | HTMLElement,
|
||||
width: graphSize,
|
||||
height: graphSize,
|
||||
// layout: {
|
||||
// type: 'force',
|
||||
// nodeStrength: -10
|
||||
// },
|
||||
defaultNode: {
|
||||
size: 2,
|
||||
style: {
|
||||
fill: '#C6E5FF',
|
||||
stroke: '#5B8FF9',
|
||||
lineWidth: 0.3,
|
||||
},
|
||||
labelCfg: {
|
||||
style: {
|
||||
fontSize: 3,
|
||||
},
|
||||
position: 'right',
|
||||
offset: 1,
|
||||
},
|
||||
},
|
||||
defaultEdge: {
|
||||
size: 0.1,
|
||||
color: '#333',
|
||||
},
|
||||
nodeStateStyles: {
|
||||
selected: {
|
||||
fill: 'steelblue',
|
||||
stroke: '#000',
|
||||
lineWidth: 1,
|
||||
},
|
||||
},
|
||||
modes: {
|
||||
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'brush-select', 'click-select'], //'zoom-canvas', 'drag-canvas', 'drag-node',
|
||||
},
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/da5a1b47-37d6-44d7-8d10-f3e046dabf82.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach((node) => {
|
||||
node.label = node.olabel;
|
||||
node.degree = 0;
|
||||
data.edges.forEach((edge) => {
|
||||
if (edge.source === node.id || edge.target === node.id) {
|
||||
node.degree++;
|
||||
}
|
||||
});
|
||||
});
|
||||
mapNodeSize(data.nodes, 'degree', [1, 10]);
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
/* normalize */
|
||||
let cx = 0,
|
||||
cy = 0;
|
||||
let minX = Infinity,
|
||||
maxX = -Infinity,
|
||||
minY = Infinity,
|
||||
maxY = -Infinity;
|
||||
data.nodes.forEach((node) => {
|
||||
cx += node.x;
|
||||
cy += node.y;
|
||||
if (minX > node.x) minX = node.x;
|
||||
if (minY > node.y) minY = node.y;
|
||||
if (maxX < node.x) maxX = node.x;
|
||||
if (maxY < node.y) maxY = node.y;
|
||||
});
|
||||
const scale = maxX - minX > maxY - minY ? maxX - minX : maxY - minY;
|
||||
cx /= data.nodes.length;
|
||||
cy /= data.nodes.length;
|
||||
data.nodes.forEach((node) => {
|
||||
node.x -= cx;
|
||||
node.y -= cy;
|
||||
node.x = (graphSize * node.x) / scale + graphSize / 2;
|
||||
node.y = (graphSize * node.y) / scale + graphSize / 2;
|
||||
});
|
||||
graph.positionsAnimate();
|
||||
// graph.on('node:dragstart', e => {
|
||||
// graph.setItemState(e.item, 'selected', true);
|
||||
// e.item.toFront();
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// graph.on('node:mouseenter', evt => {
|
||||
// const { item } = evt
|
||||
// graph.setItemState(item, 'hover', true)
|
||||
// })
|
||||
|
||||
// graph.on('node:mouseleave', evt => {
|
||||
// const { item } = evt
|
||||
// graph.setItemState(item, 'hover', false)
|
||||
// })
|
||||
});
|
||||
return <div ref={container}></div>;
|
||||
};
|
||||
|
||||
export default NetScience;
|
||||
@ -1,78 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import G6 from '../../../src';
|
||||
import { IGraph } from '../../../src/interface/graph';
|
||||
|
||||
let graph: IGraph = null;
|
||||
|
||||
const NodeAmount = () => {
|
||||
const container = React.useRef();
|
||||
useEffect(() => {
|
||||
if (!graph) {
|
||||
graph = new G6.Graph({
|
||||
container: container.current as string | HTMLElement,
|
||||
width: 1000,
|
||||
height: 1000,
|
||||
defaultNode: {
|
||||
size: 20,
|
||||
style: {
|
||||
fill: '#D8DEEB',
|
||||
stroke: '#B2BDD6',
|
||||
lineWidth: 2,
|
||||
},
|
||||
},
|
||||
nodeStateStyles: {
|
||||
// hover: {
|
||||
// fill: '#83AFFD',
|
||||
// stroke: '#5B8FF9',
|
||||
// },
|
||||
select: {
|
||||
fill: '#83AFFD',
|
||||
stroke: '#5B8FF9',
|
||||
},
|
||||
},
|
||||
modes: {
|
||||
default: ['drag-canvas', 'drag-node'],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
let nodes = [];
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
nodes.push({
|
||||
id: `node-${i}`,
|
||||
label: `${i}`,
|
||||
x: Math.random() * 450 + 50,
|
||||
y: Math.random() * 450 + 50,
|
||||
});
|
||||
}
|
||||
const data = {
|
||||
nodes,
|
||||
};
|
||||
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
graph.on('node:click', (evt) => {
|
||||
const { item } = evt;
|
||||
graph.setItemState(item, 'select', true);
|
||||
});
|
||||
graph.on('canvas:click', () => {
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.setItemState(node, 'select', false);
|
||||
});
|
||||
});
|
||||
|
||||
// graph.on('node:mouseenter', evt => {
|
||||
// const { item } = evt
|
||||
// graph.setItemState(item, 'hover', true)
|
||||
// })
|
||||
|
||||
// graph.on('node:mouseleave', evt => {
|
||||
// const { item } = evt
|
||||
// graph.setItemState(item, 'hover', false)
|
||||
// })
|
||||
});
|
||||
return <div ref={container}></div>;
|
||||
};
|
||||
|
||||
export default NodeAmount;
|
||||
@ -1,127 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import G6 from '../../../src';
|
||||
import { IGraph } from '../../../src/interface/graph';
|
||||
|
||||
let graph: IGraph = null;
|
||||
|
||||
const mapNodeSize = (nodes, propertyName, visualRange) => {
|
||||
let minp = 9999999999;
|
||||
let maxp = -9999999999;
|
||||
nodes.forEach((node) => {
|
||||
node[propertyName] = Math.pow(node[propertyName], 1 / 3);
|
||||
minp = node[propertyName] < minp ? node[propertyName] : minp;
|
||||
maxp = node[propertyName] > maxp ? node[propertyName] : maxp;
|
||||
});
|
||||
const rangepLength = maxp - minp;
|
||||
const rangevLength = visualRange[1] - visualRange[0];
|
||||
nodes.forEach((node) => {
|
||||
node.size = ((node[propertyName] - minp) / rangepLength) * rangevLength + visualRange[0];
|
||||
});
|
||||
};
|
||||
|
||||
const RtOccupy = () => {
|
||||
const container = React.useRef();
|
||||
useEffect(() => {
|
||||
if (!graph) {
|
||||
const graphSize = 800;
|
||||
const graph = new G6.Graph({
|
||||
container: container.current as string | HTMLElement,
|
||||
width: graphSize,
|
||||
height: graphSize,
|
||||
// layout: {
|
||||
// type: 'force',
|
||||
// nodeStrength: -10
|
||||
// },
|
||||
defaultNode: {
|
||||
size: 2,
|
||||
style: {
|
||||
fill: '#C6E5FF',
|
||||
stroke: '#5B8FF9',
|
||||
lineWidth: 0.3,
|
||||
},
|
||||
labelCfg: {
|
||||
style: {
|
||||
fontSize: 3,
|
||||
},
|
||||
position: 'right',
|
||||
offset: 1,
|
||||
},
|
||||
},
|
||||
defaultEdge: {
|
||||
size: 0.1,
|
||||
color: '#333',
|
||||
type: 'quadratic',
|
||||
},
|
||||
nodeStateStyles: {
|
||||
selected: {
|
||||
fill: 'steelblue',
|
||||
stroke: '#000',
|
||||
lineWidth: 1,
|
||||
},
|
||||
},
|
||||
modes: {
|
||||
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'brush-select'], //'zoom-canvas', 'drag-canvas', 'drag-node',
|
||||
},
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/667ce192-910d-4082-b134-ce78ed46be0a.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
// console.log(data);
|
||||
data.nodes.forEach((node) => {
|
||||
node.label = node.olabel;
|
||||
node.degree = 0;
|
||||
data.edges.forEach((edge) => {
|
||||
if (edge.source === node.id || edge.target === node.id) {
|
||||
node.degree++;
|
||||
}
|
||||
});
|
||||
});
|
||||
mapNodeSize(data.nodes, 'degree', [1, 15]);
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
/* normalize */
|
||||
// let cx = 0, cy = 0;
|
||||
// let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
|
||||
// data.nodes.forEach(node => {
|
||||
// cx += node.x;
|
||||
// cy += node.y;
|
||||
// if (minX > node.x) minX = node.x;
|
||||
// if (minY > node.y) minY = node.y;
|
||||
// if (maxX < node.x) maxX = node.x;
|
||||
// if (maxY < node.y) maxY = node.y;
|
||||
// });
|
||||
// const scale = maxX - minX > maxY - minY ? maxX - minX : maxY - minY;
|
||||
// cx /= data.nodes.length;
|
||||
// cy /= data.nodes.length;
|
||||
// data.nodes.forEach(node => {
|
||||
// node.x -= cx;
|
||||
// node.y -= cy;
|
||||
// node.x = graphSize * node.x / scale + graphSize / 2;
|
||||
// node.y = graphSize * node.y / scale + graphSize / 2;
|
||||
// });
|
||||
// graph.positionsAnimate();
|
||||
graph.on('node:dragstart', (e) => {
|
||||
graph.setItemState(e.item, 'selected', true);
|
||||
e.item.toFront();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// graph.on('node:mouseenter', evt => {
|
||||
// const { item } = evt
|
||||
// graph.setItemState(item, 'hover', true)
|
||||
// })
|
||||
|
||||
// graph.on('node:mouseleave', evt => {
|
||||
// const { item } = evt
|
||||
// graph.setItemState(item, 'hover', false)
|
||||
// })
|
||||
});
|
||||
return <div ref={container}></div>;
|
||||
};
|
||||
|
||||
export default RtOccupy;
|
||||
@ -1,31 +0,0 @@
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import NodeAmount from './component/node-amount';
|
||||
import Erdos from './component/erdos';
|
||||
import NetScience from './component/netscience';
|
||||
import Eva from './component/eva';
|
||||
import RtOccupy from './component/rt-occupy';
|
||||
|
||||
export default { title: 'Performance' };
|
||||
|
||||
storiesOf('Performance', module)
|
||||
.add('with large amount of nodes', () => (
|
||||
// 一个 add 表示添加一个 story
|
||||
<NodeAmount />
|
||||
))
|
||||
.add('net science data', () => (
|
||||
// 一个 add 表示添加一个 story
|
||||
<NetScience />
|
||||
))
|
||||
.add('erdos data', () => (
|
||||
// 一个 add 表示添加一个 story
|
||||
<Erdos />
|
||||
))
|
||||
.add('eva data', () => (
|
||||
// 一个 add 表示添加一个 story
|
||||
<Eva />
|
||||
))
|
||||
.add('rt occupy data', () => (
|
||||
// 一个 add 表示添加一个 story
|
||||
<RtOccupy />
|
||||
));
|
||||
@ -1,31 +0,0 @@
|
||||
import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
|
||||
import React from 'react';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
// const passions = array('Passions', ['Fishing', 'Skiing']);
|
||||
|
||||
export const withText = () => {
|
||||
const passions = text('Name', 'aaa');
|
||||
return <div>{passions}</div>;
|
||||
};
|
||||
|
||||
// export const withEmoji = () => (
|
||||
// <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
|
||||
// );
|
||||
|
||||
// Knobs for React props
|
||||
export const withAButton = () => (
|
||||
<button disabled={boolean('Disabled', false)}>{text('Label', 'Hello Storybook')}</button>
|
||||
);
|
||||
|
||||
// Knobs as dynamic variables.
|
||||
export const asDynamicVariables = () => {
|
||||
const name = text('Name', 'Arunoda Susiripala');
|
||||
const age = number('Age', 89);
|
||||
|
||||
const content = `I am ${name} and I'm ${age} years old.`;
|
||||
return <div>{content}</div>;
|
||||
};
|
||||
@ -52,6 +52,7 @@ export default defineConfig({
|
||||
isAntVSite: false, // 是否是 AntV 的大官网
|
||||
siteUrl: 'https://antv.antgroup.com', // 官网地址
|
||||
githubUrl: repository.url, // GitHub 地址
|
||||
footerTheme: 'light', // 白色 底部主题
|
||||
showSearch: true, // 是否显示搜索框
|
||||
showGithubCorner: true, // 是否显示头部的 GitHub icon
|
||||
showGithubStars: true, // 是否显示 GitHub star 数量
|
||||
@ -64,6 +65,7 @@ export default defineConfig({
|
||||
versions: {
|
||||
// 历史版本以及切换下拉菜单
|
||||
[version]: 'https://g6.antv.antgroup.com',
|
||||
'5.x': 'https://g6-next.antv.antgroup.com',
|
||||
'3.2.x': 'https://g6-v3-2.antv.vision',
|
||||
},
|
||||
docsearchOptions: {
|
||||
@ -426,16 +428,23 @@ export default defineConfig({
|
||||
},
|
||||
/** 首页技术栈介绍 */
|
||||
detail: {
|
||||
engine: {
|
||||
zh: 'G6',
|
||||
en: 'G6',
|
||||
},
|
||||
title: {
|
||||
zh: 'G6 图可视化引擎',
|
||||
en: 'G6 Graph Visualization Engine',
|
||||
zh: 'G6·图可视化引擎',
|
||||
en: 'G6·Graph Visualization Engine',
|
||||
},
|
||||
description: {
|
||||
zh: 'G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。',
|
||||
en: 'G6 is graph visualization engine with simplicity and convenience. Based on the ability of customize, it provides a set of elegant graph visualization solutions, and helps developers to build up applications for graph visualization, graph analysis, and graph editor.',
|
||||
},
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*j5AqSpmNPdYAAAAAAAAAAABkARQnAQ',
|
||||
'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6dSUSo3QTk0AAAAAAAAAAAAADmJ7AQ/original',
|
||||
imageStyle: {
|
||||
transform: 'scale(0.6)',
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
text: {
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
"@ant-design/icons": "^4.0.6",
|
||||
"@antv/algorithm": "^0.1.8",
|
||||
"@antv/chart-node-g6": "^0.0.3",
|
||||
"@antv/dumi-theme-antv": "^0.3.0-beta.5",
|
||||
"@antv/dumi-theme-antv": "^0.4.1",
|
||||
"@antv/g6": "^4.8.20",
|
||||
"@antv/hierarchy": "^0.6.10",
|
||||
"@antv/g6-react-node": "^1.4.5",
|
||||
@ -45,7 +45,7 @@
|
||||
"@antv/util": "^2.0.9",
|
||||
"@antv/vis-predict-engine": "^0.1.1",
|
||||
"@microsoft/api-extractor": "^7.33.6",
|
||||
"dumi": "^2.1.9",
|
||||
"dumi": "^2.2.14",
|
||||
"g6v5": "npm:@antv/g6@5.0.0-alpha.9",
|
||||
"insert-css": "^2.0.0",
|
||||
"react-i18next": "^11.1.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user