fix: 优化知识图谱测试api问题
This commit is contained in:
@@ -23,7 +23,7 @@ export const GraphView = ({
|
||||
const graphRef = useRef<Graph | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current || graphRef.current) return;
|
||||
if (!containerRef.current) return;
|
||||
|
||||
try {
|
||||
const graphData = {
|
||||
@@ -39,11 +39,54 @@ export const GraphView = ({
|
||||
})),
|
||||
};
|
||||
|
||||
if (graphRef.current) {
|
||||
graphRef.current.destroy();
|
||||
graphRef.current = null;
|
||||
}
|
||||
|
||||
const processedGraphData = {
|
||||
nodes: graphData.nodes.map((node: any) => {
|
||||
const typeColors: Record<string, Record<string, string>> = {
|
||||
'概念': { fill: '#4ECDC4', stroke: '#45B7B0', text: '#2C3E50' },
|
||||
'工具': { fill: '#FFA07A', stroke: '#FF7F50', text: '#2C3E50' },
|
||||
'应用': { fill: '#2ECC71', stroke: '#27AE60', text: '#2C3E50' },
|
||||
};
|
||||
|
||||
const colors = typeColors[node.type] || { fill: '#C6E5FF', stroke: '#5B8FF9', text: '#2C3E50' };
|
||||
|
||||
return {
|
||||
...node,
|
||||
type: 'circle',
|
||||
style: {
|
||||
size: 40,
|
||||
fill: colors.fill,
|
||||
stroke: colors.stroke,
|
||||
lineWidth: 2,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
data: {
|
||||
...node,
|
||||
originalType: node.type,
|
||||
colors,
|
||||
},
|
||||
};
|
||||
}),
|
||||
edges: graphData.edges.map((edge: any) => ({
|
||||
...edge,
|
||||
type: 'cubic-vertical',
|
||||
style: {
|
||||
stroke: '#95A5A6',
|
||||
lineWidth: 2,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
})),
|
||||
};
|
||||
|
||||
const graph = new Graph({
|
||||
container: containerRef.current,
|
||||
width: containerRef.current.clientWidth,
|
||||
height: height,
|
||||
data: graphData as any,
|
||||
data: processedGraphData as any,
|
||||
autoFit: 'view',
|
||||
layout: {
|
||||
type: layout.type,
|
||||
@@ -52,51 +95,33 @@ export const GraphView = ({
|
||||
linkDistance: layout.linkDistance || 100,
|
||||
},
|
||||
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'hover-activate'],
|
||||
node: {
|
||||
style: {
|
||||
size: 40,
|
||||
fill: '#C6E5FF',
|
||||
stroke: '#5B8FF9',
|
||||
lineWidth: 2,
|
||||
},
|
||||
},
|
||||
edge: {
|
||||
type: 'cubic',
|
||||
style: {
|
||||
stroke: '#e2e2e2',
|
||||
lineWidth: 2,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
graphRef.current = graph;
|
||||
graph.render();
|
||||
|
||||
graph.on('node:click', (evt) => {
|
||||
const eventData = evt as { itemId?: string };
|
||||
if (eventData.itemId) {
|
||||
const nodeData = data.nodes.find((n: Node) => n.id === eventData.itemId);
|
||||
if (nodeData && onNodeClick) {
|
||||
if (evt.itemId && onNodeClick) {
|
||||
const nodeData = data.nodes.find((n: Node) => n.id === evt.itemId);
|
||||
if (nodeData) {
|
||||
onNodeClick(nodeData);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
graph.on('edge:click', (evt) => {
|
||||
const eventData = evt as { itemId?: string };
|
||||
if (eventData.itemId) {
|
||||
const edgeData = data.edges.find((e: Edge) => e.id === eventData.itemId);
|
||||
if (edgeData && onEdgeClick) {
|
||||
if (evt.itemId && onEdgeClick) {
|
||||
const edgeData = data.edges.find((e: Edge) => e.id === evt.itemId);
|
||||
if (edgeData) {
|
||||
onEdgeClick(edgeData);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
graph.on('node:mouseenter', (evt) => {
|
||||
const eventData = evt as { itemId?: string };
|
||||
if (eventData.itemId) {
|
||||
const nodeData = data.nodes.find((n: Node) => n.id === eventData.itemId);
|
||||
if (nodeData && onNodeHover) {
|
||||
if (evt.itemId && onNodeHover) {
|
||||
const nodeData = data.nodes.find((n: Node) => n.id === evt.itemId);
|
||||
if (nodeData) {
|
||||
onNodeHover(nodeData);
|
||||
}
|
||||
}
|
||||
@@ -129,7 +154,6 @@ export const GraphView = ({
|
||||
onNodeClick,
|
||||
onEdgeClick,
|
||||
onNodeHover,
|
||||
data,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user