math_cms/resources/views/filament/pages/knowledge-graph-visualization-backup.blade.php

<div>
    <div 
        x-data="{
            initGraph() {
                const data = @js($graphData);
                const container = document.getElementById('mountNode');
                const width = container.scrollWidth;
                const height = container.scrollHeight || 600;

                if (!window.G6) {
                    console.error('G6 not loaded');
                    return;
                }

                const graph = new G6.Graph({
                    container: 'mountNode',
                    width,
                    height,
                    modes: {
                        default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
                    },
                    layout: {
                        type: 'dagre',
                        rankdir: 'LR',
                        align: 'UL',
                        controlPoints: true,
                        nodesepFunc: () => 1,
                        ranksepFunc: () => 1,
                    },
                    defaultNode: {
                        type: 'rect',
                        size: [150, 50],
                        style: {
                            radius: 5,
                            fill: '#C6E5FF',
                            stroke: '#5B8FF9',
                            lineWidth: 2,
                        },
                        labelCfg: {
                            style: {
                                fill: '#000',
                                fontSize: 12,
                            },
                        },
                    },
                    defaultEdge: {
                        type: 'polyline',
                        style: {
                            radius: 20,
                            offset: 45,
                            endArrow: true,
                            lineWidth: 2,
                            stroke: '#C2C8D5',
                        },
                    },
                });

                // Transform data to G6 format
                const nodes = data.nodes.map(node => ({
                    id: node.kp_code,
                    label: node.cn_name || node.kp_code,
                    ...node
                }));

                const edges = data.edges.map(edge => ({
                    source: edge.source,
                    target: edge.target,
                    label: edge.relation_type,
                    ...edge
                }));

                graph.data({ nodes, edges });
                graph.render();
                
                // Resize handling
                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);
                    };
            }
        }"
        x-init="
            if (!window.G6) {
                const script = document.createElement('script');
                script.src = 'https://gw.alipayobjects.com/os/lib/antv/g6/4.8.24/dist/g6.min.js';
                script.onload = initGraph;
                document.head.appendChild(script);
            } else {
                initGraph();
            }
        "
        class="w-full h-[600px] bg-white dark:bg-gray-800 rounded-lg shadow p-4"
    >
        <div id="mountNode" class="w-full h-full"></div>
    </div>
</div>