File size: 2,017 Bytes
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 |
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);
const render = () => {
const graph = new Graph({
container: containerRef.current!,
autoFit: 'view',
behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
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',
comboPadding: 2,
},
node: {
style: {
size: 20,
labelText: (d) => d.id,
labelPadding: 20,
// labelOffsetX: 20,
labelOffsetY: 5,
},
palette: {
type: 'group',
field: (d) => d.combo,
},
},
edge: {
style: (model) => {
const { size, color } = model.data;
return {
stroke: color || '#99ADD1',
lineWidth: size || 1,
};
},
},
// data: graphData,
});
graph.setData(finalData);
graph.render();
};
useEffect(() => {
render();
}, []);
return <div ref={containerRef} className={styles.container} />;
};
export default ForceGraph;
|