-
Notifications
You must be signed in to change notification settings - Fork 263
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ add advanced example:find-connections and node-expand
- Loading branch information
1 parent
349d102
commit 4a62c18
Showing
10 changed files
with
389 additions
and
10 deletions.
There are no files selected for viewing
150 changes: 150 additions & 0 deletions
150
packages/graphin-site/examples/advanced/find-connections/demo/Simple.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,150 @@ | ||
/* eslint-disable no-undef */ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import Graphin, { Utils } from '@antv/graphin'; | ||
import { Toolbar } from '@antv/graphin-components'; | ||
import { message } from 'antd'; | ||
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS | ||
import '@antv/graphin-components/dist/index.css'; // 引入Graphin CSS | ||
|
||
const chunk = (arr, size) => | ||
Array.from({ length: Math.ceil(arr.length / size) }, (v, i) => arr.slice(i * size, i * size + size)); | ||
|
||
const App = () => { | ||
const [state, setState] = React.useState({ | ||
selected: [], | ||
data: Utils.mock(20) | ||
.random() | ||
.graphin(), | ||
}); | ||
|
||
const { data, selected } = state; | ||
const graphRef = React.createRef(null); | ||
React.useEffect(() => { | ||
const { graph } = graphRef.current; | ||
|
||
// TODO:框选进行关系扩散,暂时不支持多选 | ||
const onNodeSelectChange = e => { | ||
if (e.target) { | ||
console.info('圈选是targets参数'); | ||
return; | ||
} | ||
const nodes = e.targets.nodes.map(node => { | ||
return node.get('model'); | ||
}); | ||
|
||
setState({ | ||
...state, | ||
selected: nodes, | ||
}); | ||
}; | ||
graph.on('nodeselectchange', onNodeSelectChange); | ||
|
||
return () => { | ||
graph.off('nodeselectchange', onNodeSelectChange); | ||
}; | ||
}, [state]); | ||
|
||
const onFindConnections = () => { | ||
if (selected.length === 0) { | ||
message.info('请先选中/圈选节点'); | ||
return; | ||
} | ||
|
||
const findConnectionData = { nodes: [], edges: [] }; | ||
// 1度扩散,中间经历一个节点 | ||
const sortArray = chunk(selected, 2); | ||
sortArray.forEach(arr => { | ||
const [source, target = selected[0]] = arr; | ||
|
||
const relativeNode = { | ||
id: `find-node-${source.id}-${target.id}`, | ||
shape: 'CanonicalCircleNode', | ||
label: 'discover node', | ||
style: { | ||
primaryColor: '#ff7617', | ||
icon: 'home', | ||
nodeSize: 20, | ||
}, | ||
data: { | ||
id: `find-node-${source.id}-${target.id}`, | ||
}, | ||
}; | ||
findConnectionData.nodes.push(...arr, relativeNode); | ||
findConnectionData.edges.push( | ||
{ | ||
source: source.id, | ||
target: relativeNode.id, | ||
shape: 'CanonicalLineEdge', | ||
label: '一度发现', | ||
style: { | ||
line: { | ||
dash: [2, 2], | ||
}, | ||
}, | ||
data: { | ||
source: source.id, | ||
target: relativeNode.id, | ||
}, | ||
}, | ||
{ | ||
source: relativeNode.id, | ||
target: target.id, | ||
shape: 'CanonicalLineEdge', | ||
label: '一度发现', | ||
style: { | ||
line: { | ||
dash: [2, 2], | ||
}, | ||
}, | ||
data: { | ||
source: relativeNode.id, | ||
target: target.id, | ||
}, | ||
}, | ||
); | ||
}); | ||
|
||
setState({ | ||
...state, | ||
data: { | ||
// 还需要对Node和Edge去重,这里暂不考虑 | ||
nodes: [...state.data.nodes, ...findConnectionData.nodes], | ||
edges: [...state.data.edges, ...findConnectionData.edges], | ||
}, | ||
}); | ||
}; | ||
|
||
return ( | ||
<div className="App"> | ||
<h3> | ||
基于力导的关系发现:按住Shift圈选你需要发现关系的节点 | ||
<button onClick={onFindConnections} style={{ float: 'right', height: '28px', lineHeight: '28px' }}> | ||
点击发现关系 | ||
</button> | ||
</h3> | ||
<Graphin | ||
data={data} | ||
layout={{ | ||
name: 'force', | ||
options: { | ||
defSpringLen: (_edge, source, target) => { | ||
/** 默认返回的是 200 的弹簧长度 */ | ||
/** 如果你要想要产生聚类的效果,可以考虑 根据边两边节点的度数来动态设置边的初始化长度:度数越小,则边越短 */ | ||
const nodeSize = 30; | ||
const Sdegree = source.data.layout?.degree; | ||
const Tdegree = target.data.layout?.degree; | ||
const minDegree = Math.min(Sdegree, Tdegree); | ||
return minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize * 2; | ||
}, | ||
}, | ||
}} | ||
ref={graphRef} | ||
> | ||
<Toolbar style={{ position: 'absolute', bottom: 28, left: 28 }} /> | ||
</Graphin> | ||
</div> | ||
); | ||
}; | ||
|
||
ReactDOM.render(<App />, document.getElementById('container')); |
13 changes: 13 additions & 0 deletions
13
packages/graphin-site/examples/advanced/find-connections/demo/meta.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"title": { | ||
"zh": "中文分类", | ||
"en": "Category" | ||
}, | ||
"demos": [ | ||
{ | ||
"filename": "Simple.jsx", | ||
"title": "关系发现", | ||
"screenshot": "" | ||
} | ||
] | ||
} |
6 changes: 6 additions & 0 deletions
6
packages/graphin-site/examples/advanced/find-connections/index.zh.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
title: 关系发现 | ||
order: 0 | ||
--- | ||
|
||
- 根据六度分割理论,发现可能隐藏的关联关系。 |
78 changes: 78 additions & 0 deletions
78
packages/graphin-site/examples/advanced/node-expand/demo/Dagre.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
/* eslint-disable no-undef */ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import { message } from 'antd'; | ||
import Graphin, { Utils } from '@antv/graphin'; | ||
import { Toolbar } from '@antv/graphin-components'; | ||
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS | ||
import '@antv/graphin-components/dist/index.css'; // 引入Graphin CSS | ||
|
||
const App = () => { | ||
const [state, setState] = React.useState({ | ||
selected: [], | ||
data: Utils.mock(5) | ||
.circle() | ||
.graphin(), | ||
}); | ||
|
||
const { data, selected } = state; | ||
const graphRef = React.createRef(null); | ||
React.useEffect(() => { | ||
const { graph } = graphRef.current; | ||
const onNodeClick = e => { | ||
setState({ | ||
...state, | ||
selected: [e.item.get('model')], | ||
}); | ||
}; | ||
graph.on('node:click', onNodeClick); | ||
return () => { | ||
graph.off('node:click', onNodeClick); | ||
}; | ||
}, [state]); | ||
|
||
const onExpand = () => { | ||
if (selected.length === 0) { | ||
message.info('请先选中/圈选节点'); | ||
return; | ||
} | ||
const count = Math.round(Math.random() * 20); | ||
|
||
const expandData = Utils.mock(count) | ||
.expand(selected) | ||
.type('company') | ||
.graphin(); | ||
|
||
setState({ | ||
...state, | ||
data: { | ||
// 还需要对Node和Edge去重,这里暂不考虑 | ||
nodes: [...state.data.nodes, ...expandData.nodes], | ||
edges: [...state.data.edges, ...expandData.edges], | ||
}, | ||
}); | ||
}; | ||
|
||
return ( | ||
<div className="App"> | ||
<h3> | ||
基于有向分层的节点扩散 | ||
<button onClick={onExpand} style={{ float: 'right', height: '28px', lineHeight: '28px' }}> | ||
点击扩散 | ||
</button> | ||
</h3> | ||
|
||
<Graphin | ||
data={data} | ||
layout={{ | ||
name: 'dagre', | ||
}} | ||
ref={graphRef} | ||
> | ||
<Toolbar style={{ position: 'absolute', bottom: 28, left: 28 }} /> | ||
</Graphin> | ||
</div> | ||
); | ||
}; | ||
|
||
ReactDOM.render(<App />, document.getElementById('container')); |
108 changes: 108 additions & 0 deletions
108
packages/graphin-site/examples/advanced/node-expand/demo/Force.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
/* eslint-disable no-undef */ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import Graphin, { Utils } from '@antv/graphin'; | ||
import { Toolbar } from '@antv/graphin-components'; | ||
import { message } from 'antd'; | ||
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS | ||
import '@antv/graphin-components/dist/index.css'; // 引入Graphin CSS | ||
|
||
const App = () => { | ||
const [state, setState] = React.useState({ | ||
selected: [], | ||
data: Utils.mock(5) | ||
.circle() | ||
.graphin(), | ||
}); | ||
|
||
const { data, selected } = state; | ||
const graphRef = React.createRef(null); | ||
React.useEffect(() => { | ||
const { graph } = graphRef.current; | ||
|
||
const onNodeClick = e => { | ||
setState({ | ||
...state, | ||
selected: [e.item.get('model')], | ||
}); | ||
}; | ||
|
||
graph.on('node:click', onNodeClick); | ||
// TODO:框选进行关系扩散,暂时不支持多选 | ||
const onNodeSelectChange = e => { | ||
if (e.target) { | ||
console.info('圈选是targets参数'); | ||
return; | ||
} | ||
const nodes = e.targets.nodes.map(node => { | ||
return node.get('model'); | ||
}); | ||
|
||
setState({ | ||
...state, | ||
selected: nodes, | ||
}); | ||
}; | ||
graph.on('nodeselectchange', onNodeSelectChange); | ||
|
||
return () => { | ||
graph.off('node:click', onNodeClick); | ||
graph.off('nodeselectchange', onNodeSelectChange); | ||
}; | ||
}, [state]); | ||
|
||
const onExpand = () => { | ||
if (selected.length === 0) { | ||
message.info('请先选中/圈选节点'); | ||
return; | ||
} | ||
const count = Math.round(Math.random() * 20); | ||
|
||
const expandData = Utils.mock(count) | ||
.expand(selected) | ||
.type('company') | ||
.graphin(); | ||
|
||
setState({ | ||
...state, | ||
data: { | ||
// 还需要对Node和Edge去重,这里暂不考虑 | ||
nodes: [...state.data.nodes, ...expandData.nodes], | ||
edges: [...state.data.edges, ...expandData.edges], | ||
}, | ||
}); | ||
}; | ||
return ( | ||
<div className="App"> | ||
<h3> | ||
基于力导的节点扩散,支持按住Shift圈选,多个节点同时扩散 | ||
<button onClick={onExpand} style={{ float: 'right', height: '28px', lineHeight: '28px' }}> | ||
点击扩散 | ||
</button> | ||
</h3> | ||
<Graphin | ||
data={data} | ||
layout={{ | ||
name: 'force', | ||
options: { | ||
defSpringLen: (_edge, source, target) => { | ||
/** 默认返回的是 200 的弹簧长度 */ | ||
|
||
/** 如果你要想要产生聚类的效果,可以考虑 根据边两边节点的度数来动态设置边的初始化长度:度数越小,则边越短 */ | ||
const nodeSize = 30; | ||
const Sdegree = source.data.layout?.degree; | ||
const Tdegree = target.data.layout?.degree; | ||
const minDegree = Math.min(Sdegree, Tdegree); | ||
return minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize * 2; | ||
}, | ||
}, | ||
}} | ||
ref={graphRef} | ||
> | ||
<Toolbar style={{ position: 'absolute', bottom: 28, left: 28 }} /> | ||
</Graphin> | ||
</div> | ||
); | ||
}; | ||
|
||
ReactDOM.render(<App />, document.getElementById('container')); |
18 changes: 18 additions & 0 deletions
18
packages/graphin-site/examples/advanced/node-expand/demo/meta.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
{ | ||
"title": { | ||
"zh": "中文分类", | ||
"en": "Category" | ||
}, | ||
"demos": [ | ||
{ | ||
"filename": "Force.jsx", | ||
"title": "力导布局下的关系扩散", | ||
"screenshot": "" | ||
}, | ||
{ | ||
"filename": "Dagre.jsx", | ||
"title": "有向分层下的关系扩散", | ||
"screenshot": "" | ||
} | ||
] | ||
} |
6 changes: 6 additions & 0 deletions
6
packages/graphin-site/examples/advanced/node-expand/index.zh.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
title: 节点扩散 | ||
order: 0 | ||
--- | ||
|
||
- 利用风险聚集原理,由一个风险节点扩散去找其他风险节点。 |
Oops, something went wrong.