带有不可见根连接的圆形布局

功能概述

本示例演示了在圆形布局中显示节点的技术，同时保持一个不可见的根节点连接到所有其他节点。根节点（节点 ‘a’）作为隐藏锚点，带有不可见的连线（opacity: 0）连接到每个其他节点。少数可见连线连接特定节点以显示实际关系。当您需要一个中心参考点而不造成视觉混乱时，这种模式很有用。

核心特性实现

带有隐藏连接的不可见根节点

图创建了一个连接到所有其他节点的根节点，但这些连接是不可见的：

const initializeGraph = async () => {
    const myJsonData: RGJsonData = {
        nodes: [
            { id: 'a', text: 'a' },
            { id: 'b', text: 'b' },
            { id: 'b1', text: 'b1' },
            { id: 'b2', text: 'b2' },
            { id: 'b3', text: 'b3' },
            { id: 'b4', text: 'b4' },
            { id: 'b5', text: 'b5' },
            { id: 'b6', text: 'b6' },
            { id: 'c', text: 'c' },
            { id: 'c1', text: 'c1' },
            { id: 'c2', text: 'c2' },
            { id: 'c3', text: 'c3' },
            { id: 'd', text: 'd' },
            { id: 'd1', text: 'd1' },
            { id: 'd2', text: 'd2' },
            { id: 'd3', text: 'd3' },
            { id: 'd4', text: 'd4' },
            { id: 'e', text: 'e' },
            { id: 'e2', text: 'e2' }
        ],
        lines: [
            // 特定节点之间的可见关系
            { id: 'l1', from: 'b', to: 'b1' },
            { id: 'l2', from: 'c2', to: 'b5' },
            { id: 'l3', from: 'd3', to: 'b3' },
            { id: 'l4', from: 'd', to: 'd1' },
            { id: 'l5', from: 'e', to: 'e2' }
        ]
    };

    const rootId = myJsonData.nodes[0].id;
    myJsonData.rootId = rootId;

    // 添加从根节点到所有其他节点的不可见连线
    let lineIndex = myJsonData.lines.length + 1;
    myJsonData.nodes.forEach(n => {
        if (n.id !== rootId) {
            myJsonData.lines.push({
                id: `l${lineIndex++}`,
                from: rootId,
                to: n.id,
                opacity: 0  // 使连线不可见
            });
        }
    });

    await graphInstance.setJsonData(myJsonData);
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

关键要点：

根节点作为锚点：节点 ‘a’ 充当中心根节点
不可见连接：从根节点出发的连线具有 opacity: 0
可见关系：非根节点之间的特定连线保持可见
唯一 ID：每条连线都有唯一 ID 以便正确识别

圆形布局配置

使用圆形布局将节点排列成圆形模式：

const graphOptions: RGOptions = {
    debug: false,
    defaultJunctionPoint: RGJunctionPoint.border,
    defaultNodeShape: RGNodeShape.circle,
    defaultNodeWidth: 60,
    defaultNodeHeight: 60,
    defaultLineWidth: 2,
    layout: {
        layoutName: 'circle'
    }
};

事件处理器

节点和连线的基本点击处理器：

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    console.log('onNodeClick:', nodeObject);
};

const onLineClick = (lineObject: RGLine, linkObject: RGLink, $event: RGUserEvent) => {
    console.log('onLineClick:', lineObject);
};

创意使用场景

社交网络分析：以圆形布局显示用户，平台作为不可见中心节点。显示用户之间的可见友谊关系，同时保持与平台的隐藏连接以便数据管理。

思维导图工具：创建一个隐藏的中心概念节点，相关主题围绕其圆形排列。仅显示主题之间的有意义的关联，同时将中心概念作为结构锚点保持。

网络拓扑可视化：可视化中心交换机或路由器周围的网络设备。隐藏中心基础设施，但显示相互通信的端点之间的直接连接。

轨道系统显示：显示围绕中心体的行星或卫星。将中心体显示为不可见参考点，同时显示轨道物体之间的重力相互作用或通信链路。

技能图谱可视化：在隐藏的职业或领域周围圆形显示技能。显示相关技能之间的关系，同时将领域作为组织骨干保持，而不具有视觉突出性。

孤点或者没有关系的节点

带有不可见根连接的圆形布局 - 中心隐藏节点锚定圆形可见节点