mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 18:11:08 +08:00
610 lines
9.2 KiB
JavaScript
610 lines
9.2 KiB
JavaScript
import G6 from '@antv/g6';
|
|
|
|
|
|
const container = document.getElementById('container');
|
|
const width = container.scrollWidth;
|
|
const height = (container.scrollHeight || 500) - 50;
|
|
const el = document.createElement('pre');
|
|
el.innerHTML =
|
|
'Click the legend item to filter\n点击图例上的元素进行筛选';
|
|
container.appendChild(el);
|
|
|
|
const data = {
|
|
nodes: [
|
|
{
|
|
id: '0',
|
|
label: '0',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '1',
|
|
label: '1',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '2',
|
|
label: '2',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '3',
|
|
label: '3',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '4',
|
|
label: '4',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '5',
|
|
label: '5',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '6',
|
|
label: '6',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '7',
|
|
label: '7',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '8',
|
|
label: '8',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '9',
|
|
label: '9',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '10',
|
|
label: '10',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '11',
|
|
label: '11',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '12',
|
|
label: '12',
|
|
cluster: 'a',
|
|
},
|
|
{
|
|
id: '13',
|
|
label: '13',
|
|
cluster: 'b',
|
|
},
|
|
{
|
|
id: '14',
|
|
label: '14',
|
|
cluster: 'b',
|
|
},
|
|
{
|
|
id: '15',
|
|
label: '15',
|
|
cluster: 'b',
|
|
},
|
|
{
|
|
id: '16',
|
|
label: '16',
|
|
cluster: 'b',
|
|
},
|
|
{
|
|
id: '17',
|
|
label: '17',
|
|
cluster: 'b',
|
|
},
|
|
{
|
|
id: '18',
|
|
label: '18',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '19',
|
|
label: '19',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '20',
|
|
label: '20',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '21',
|
|
label: '21',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '22',
|
|
label: '22',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '23',
|
|
label: '23',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '24',
|
|
label: '24',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '25',
|
|
label: '25',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '26',
|
|
label: '26',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '27',
|
|
label: '27',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '28',
|
|
label: '28',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '29',
|
|
label: '29',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '30',
|
|
label: '30',
|
|
cluster: 'c',
|
|
},
|
|
{
|
|
id: '31',
|
|
label: '31',
|
|
cluster: 'd',
|
|
},
|
|
{
|
|
id: '32',
|
|
label: '32',
|
|
cluster: 'd',
|
|
},
|
|
{
|
|
id: '33',
|
|
label: '33',
|
|
cluster: 'd',
|
|
},
|
|
],
|
|
edges: [
|
|
{
|
|
source: '0',
|
|
target: '1',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '2',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '3',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '4',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '5',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '7',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '8',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '9',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '10',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '11',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '13',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '14',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '15',
|
|
},
|
|
{
|
|
source: '0',
|
|
target: '16',
|
|
},
|
|
{
|
|
source: '2',
|
|
target: '3',
|
|
},
|
|
{
|
|
source: '4',
|
|
target: '5',
|
|
},
|
|
{
|
|
source: '4',
|
|
target: '6',
|
|
},
|
|
{
|
|
source: '5',
|
|
target: '6',
|
|
},
|
|
{
|
|
source: '7',
|
|
target: '13',
|
|
},
|
|
{
|
|
source: '8',
|
|
target: '14',
|
|
},
|
|
{
|
|
source: '9',
|
|
target: '10',
|
|
},
|
|
{
|
|
source: '10',
|
|
target: '22',
|
|
},
|
|
{
|
|
source: '10',
|
|
target: '14',
|
|
},
|
|
{
|
|
source: '10',
|
|
target: '12',
|
|
},
|
|
{
|
|
source: '10',
|
|
target: '24',
|
|
},
|
|
{
|
|
source: '10',
|
|
target: '21',
|
|
},
|
|
{
|
|
source: '10',
|
|
target: '20',
|
|
},
|
|
{
|
|
source: '11',
|
|
target: '24',
|
|
},
|
|
{
|
|
source: '11',
|
|
target: '22',
|
|
},
|
|
{
|
|
source: '11',
|
|
target: '14',
|
|
},
|
|
{
|
|
source: '12',
|
|
target: '13',
|
|
},
|
|
{
|
|
source: '16',
|
|
target: '17',
|
|
},
|
|
{
|
|
source: '16',
|
|
target: '18',
|
|
},
|
|
{
|
|
source: '16',
|
|
target: '21',
|
|
},
|
|
{
|
|
source: '16',
|
|
target: '22',
|
|
},
|
|
{
|
|
source: '17',
|
|
target: '18',
|
|
},
|
|
{
|
|
source: '17',
|
|
target: '20',
|
|
},
|
|
{
|
|
source: '18',
|
|
target: '19',
|
|
},
|
|
{
|
|
source: '19',
|
|
target: '20',
|
|
},
|
|
{
|
|
source: '19',
|
|
target: '33',
|
|
},
|
|
{
|
|
source: '19',
|
|
target: '22',
|
|
},
|
|
{
|
|
source: '19',
|
|
target: '23',
|
|
},
|
|
{
|
|
source: '20',
|
|
target: '21',
|
|
},
|
|
{
|
|
source: '21',
|
|
target: '22',
|
|
},
|
|
{
|
|
source: '22',
|
|
target: '24',
|
|
},
|
|
{
|
|
source: '22',
|
|
target: '25',
|
|
},
|
|
{
|
|
source: '22',
|
|
target: '26',
|
|
},
|
|
{
|
|
source: '22',
|
|
target: '23',
|
|
},
|
|
{
|
|
source: '22',
|
|
target: '28',
|
|
},
|
|
{
|
|
source: '22',
|
|
target: '30',
|
|
},
|
|
{
|
|
source: '22',
|
|
target: '31',
|
|
},
|
|
{
|
|
source: '22',
|
|
target: '32',
|
|
},
|
|
{
|
|
source: '22',
|
|
target: '33',
|
|
},
|
|
{
|
|
source: '23',
|
|
target: '28',
|
|
},
|
|
{
|
|
source: '23',
|
|
target: '27',
|
|
},
|
|
{
|
|
source: '23',
|
|
target: '29',
|
|
},
|
|
{
|
|
source: '23',
|
|
target: '30',
|
|
},
|
|
{
|
|
source: '23',
|
|
target: '31',
|
|
},
|
|
{
|
|
source: '23',
|
|
target: '33',
|
|
},
|
|
{
|
|
source: '32',
|
|
target: '33',
|
|
},
|
|
],
|
|
};
|
|
|
|
const colors = [
|
|
'#BDD2FD',
|
|
'#BDEFDB',
|
|
'#C2C8D5',
|
|
'#FBE5A2',
|
|
'#F6C3B7',
|
|
'#B6E3F5',
|
|
'#D3C6EA',
|
|
'#FFD8B8',
|
|
'#AAD8D8',
|
|
'#FFD6E7',
|
|
];
|
|
const strokes = [
|
|
'#5B8FF9',
|
|
'#5AD8A6',
|
|
'#5D7092',
|
|
'#F6BD16',
|
|
'#E8684A',
|
|
'#6DC8EC',
|
|
'#9270CA',
|
|
'#FF9D4D',
|
|
'#269A99',
|
|
'#FF99C3',
|
|
];
|
|
|
|
const clusterMap = new Map();
|
|
let clusterId = 0;
|
|
data.nodes.forEach(function (node) {
|
|
// cluster
|
|
if (node.cluster && clusterMap.get(node.cluster) === undefined) {
|
|
clusterMap.set(node.cluster, clusterId);
|
|
clusterId++;
|
|
}
|
|
const cid = clusterMap.get(node.cluster);
|
|
if (!node.style) {
|
|
node.style = {};
|
|
}
|
|
node.style.fill = colors[cid % colors.length];
|
|
node.style.stroke = strokes[cid % strokes.length];
|
|
});
|
|
|
|
data.edges.forEach(edge => {
|
|
edge.cluster = data.nodes[+edge.source].cluster;
|
|
const cid = clusterMap.get(edge.cluster);
|
|
console.log(edge.cluster, cid)
|
|
edge.style = {
|
|
stroke: colors[cid % colors.length]
|
|
}
|
|
})
|
|
|
|
|
|
const legendData = {
|
|
nodes: [
|
|
{ id: 'a', label: 'a', },
|
|
{ id: 'b', label: 'b', },
|
|
{ id: 'c', label: 'c', },
|
|
{ id: 'd', label: 'd', }
|
|
], edges: [
|
|
{ id: 'a', label: 'a', },
|
|
{ id: 'b', label: 'b', },
|
|
{ id: 'c', label: 'c', },
|
|
{ id: 'd', label: 'd', }
|
|
]
|
|
}
|
|
legendData.nodes.forEach(node => {
|
|
const cid = clusterMap.get(node.id);
|
|
node.style = {
|
|
fill: colors[cid % colors.length],
|
|
stroke: strokes[cid % strokes.length]
|
|
};
|
|
})
|
|
legendData.edges.forEach(node => {
|
|
const cid = clusterMap.get(node.id);
|
|
node.style = {
|
|
fill: colors[cid % colors.length],
|
|
stroke: strokes[cid % strokes.length]
|
|
};
|
|
})
|
|
const legend = new G6.Legend({
|
|
data: legendData,
|
|
align: 'center',
|
|
layout: 'horizontal', // vertical
|
|
position: 'bottom-left',
|
|
vertiSep: 12,
|
|
horiSep: 24,
|
|
offsetY: -24,
|
|
padding: [4, 16, 8, 16],
|
|
containerStyle: {
|
|
fill: '#ccc',
|
|
lineWidth: 1
|
|
},
|
|
title: 'Legend',
|
|
titleConfig: {
|
|
position: 'left',
|
|
offsetX: 0,
|
|
offsetY: 12,
|
|
},
|
|
filter: {
|
|
enable: true,
|
|
multiple: true,
|
|
trigger: 'click',
|
|
graphActiveState: 'activeByLegend',
|
|
graphInactiveState: 'inactiveByLegend',
|
|
filterFunctions: {
|
|
'a': (d) => {
|
|
if (d.cluster === 'a') return true;
|
|
return false
|
|
},
|
|
'b': (d) => {
|
|
if (d.cluster === 'b') return true;
|
|
return false
|
|
},
|
|
'c': (d) => {
|
|
if (d.cluster === 'c') return true;
|
|
return false
|
|
},
|
|
'd': (d) => {
|
|
if (d.cluster === 'd') return true;
|
|
return false
|
|
},
|
|
}
|
|
}
|
|
});
|
|
|
|
const graph = new G6.Graph({
|
|
container: 'container',
|
|
width,
|
|
height,
|
|
modes: {
|
|
default: ['drag-canvas', 'drag-node'],
|
|
},
|
|
plugins: [legend],
|
|
animate: true,
|
|
defaultNode: {
|
|
size: 20,
|
|
style: {
|
|
lineWidth: 2,
|
|
},
|
|
},
|
|
defaultEdge: {
|
|
size: 1,
|
|
color: '#e2e2e2',
|
|
style: {
|
|
endArrow: {
|
|
path: 'M 0,0 L 8,4 L 8,-4 Z',
|
|
fill: '#e2e2e2',
|
|
},
|
|
},
|
|
},
|
|
nodeStateStyles: {
|
|
activeByLegend: {
|
|
lineWidth: 5,
|
|
strokeOpacity: 0.5,
|
|
stroke: '#f00'
|
|
},
|
|
inactiveByLegend: {
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
edgeStateStyles: {
|
|
activeByLegend: {
|
|
lineWidth: 10,
|
|
strokeOpacity: 0.5
|
|
},
|
|
inactiveByLegend: {
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
layout: {
|
|
type: 'gForce',
|
|
},
|
|
});
|
|
graph.data(data);
|
|
graph.render();
|
|
|
|
if (typeof window !== 'undefined')
|
|
window.onresize = () => {
|
|
if (!graph || graph.get('destroyed')) return;
|
|
if (!container || !container.scrollWidth || !container.scrollHeight) return;
|
|
graph.changeSize(container.scrollWidth, container.scrollHeight);
|
|
};
|