带有不可见根连接的力导向布局

功能概述

本示例演示了力导向图布局，其中不可见的根节点通过隐藏连线连接到所有其他节点。力布局算法根据连接自然定位节点，根节点（节点 ‘a’）通过不可见链接（opacity: 0）充当引力锚点。仅显示非根节点之间的特定关系，创建简洁的可视化效果，其中底层结构保持图连接性而不会造成视觉混乱。

核心特性实现

带有隐藏根锚点的力布局

图使用力导向布局和不可见中心节点：

const initializeGraph = async () => {
    const myJsonData: RGJsonData = {
        rootId: '',
        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: 'e1', text: 'e1' },
            { id: 'e2', text: 'e2' }
        ],
        lines: [
            // 可见关系
            { id: 'l1', from: 'b', to: 'b1' },
            { id: 'l2', from: 'b', to: 'b2' },
            { id: 'l3', from: 'd', to: 'd1' },
            { id: 'l4', from: 'd', to: 'd2' },
            { id: 'l5', from: 'e', to: 'e2' }
        ]
    };

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

    // 添加从根节点到所有节点的不可见锚点连线
    myJsonData.nodes.forEach(n => {
        if (n.id !== rootId) {
            myJsonData.lines.push({
                id: `l-hidden-${n.id}`,
                from: rootId,
                to: n.id,
                opacity: 0  // 不可见但影响力布局算法
            });
        }
    });

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

关键要点：

根节点作为引力中心：节点 ‘a’ 将所有其他节点拉向中心
不可见结构链接：隐藏连线为布局算法保持图连接性
可见子集：仅向用户显示选定的关系
力导向定位：节点根据吸引/排斥力自组织

力布局配置

配置带有自定义排斥力的力导向布局：

const graphOptions: RGOptions = {
    debug: false,
    defaultJunctionPoint: RGJunctionPoint.border,
    defaultNodeShape: RGNodeShape.circle,
    defaultLineShape: RGLineShape.StandardStraight,
    defaultNodeWidth: 60,
    defaultNodeHeight: 60,
    defaultLineWidth: 2,
    defaultLineColor: '#333333',
    layout: {
        layoutName: 'force',
        force_node_repulsion: 0.5  // 控制节点推开程度
    }
};

force_node_repulsion 参数（0.5）在节点之间创建适度的间距，防止重叠同时保持图紧凑。

圆形节点形状

所有节点渲染为具有一致大小的圆形：

defaultNodeShape: RGNodeShape.circle,
defaultNodeWidth: 60,
defaultNodeHeight: 60,

事件处理器

用于交互的标准点击处理器：

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

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

创意使用场景

知识图谱探索：显示带有隐藏领域锚点的概念。仅显示概念之间的语义关系，而不可见根节点保持整体图的凝聚力。

社交社区检测：可视化社交网络，其中隐藏的"社区"节点连接所有成员。仅显示实际友谊关系，而社区节点影响群组聚类。

蛋白质相互作用网络：显示带有隐藏细胞过程锚点的蛋白质。仅显示经过实验验证的相互作用，而到过程的不可见链接引导布局。

项目依赖关系图：可视化带有隐藏项目根的模块。显示直接依赖关系，而到根的不可见连接确保所有模块保持相对居中。

推荐系统可视化：显示带有不可见用户偏好锚点的项目。显示项目相似性关系，而到用户聚类的隐藏连接组织布局。

孤点或者没有关系的节点2

带有不可见根连接的力导向布局 - 隐藏锚点节点组织力导向图结构