File size: 2,582 Bytes
8a4f6c9 7bcfa53 8a4f6c9 7bcfa53 8a4f6c9 7bcfa53 8a4f6c9 7bcfa53 8a4f6c9 7bcfa53 8a4f6c9 7bcfa53 8a4f6c9 7bcfa53 8a4f6c9 7bcfa53 8a4f6c9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
import { Graph } from '@antv/g6';
import { useSize } from 'ahooks';
import { useEffect, useRef } from 'react';
import { graphData } from './constant';
import styles from './index.less';
import { Converter } from './util';
const converter = new Converter();
const nextData = converter.buildNodesAndCombos(
graphData.nodes,
graphData.edges,
);
console.log('🚀 ~ nextData:', nextData);
const finalData = { ...graphData, ...nextData };
const ForceGraph = () => {
const containerRef = useRef<HTMLDivElement>(null);
const size = useSize(containerRef);
let graph: Graph;
const render = () => {
graph = new Graph({
container: containerRef.current!,
autoFit: 'view',
behaviors: [
'drag-element',
'drag-canvas',
'zoom-canvas',
'collapse-expand',
{
type: 'hover-activate',
degree: 1, // 👈🏻 Activate relations.
},
],
plugins: [
{
type: 'tooltip',
getContent: (e, items) => {
if (items.every((x) => x?.description)) {
let result = ``;
items.forEach((item) => {
if (item?.description) {
result += `<p>${item?.description}</p>`;
}
});
return result;
}
return undefined;
},
},
],
layout: {
type: 'combo-combined',
preventOverlap: true,
comboPadding: 1,
spacing: 20,
},
node: {
style: {
size: 20,
labelText: (d) => d.id,
labelPadding: 30,
// labelOffsetX: 20,
// labelOffsetY: 5,
labelPlacement: 'center',
labelWordWrap: true,
},
palette: {
type: 'group',
field: (d) => d.combo,
},
// state: {
// highlight: {
// fill: '#D580FF',
// halo: true,
// lineWidth: 0,
// },
// dim: {
// fill: '#99ADD1',
// },
// },
},
edge: {
style: (model) => {
const { size, color } = model.data;
return {
stroke: color || '#99ADD1',
lineWidth: size || 1,
};
},
},
// data: graphData,
});
graph.setData(finalData);
graph.render();
};
useEffect(() => {
console.info('rendered');
render();
}, []);
return <div ref={containerRef} className={styles.container} />;
};
export default ForceGraph;
|