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

功能概述

本示例演示了圆形布局变体，其中不可见的根节点通过隐藏的绿色连线连接到所有其他节点。与其他"show-single-nodes"示例类似，它对根连接使用 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: '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 lineCounter = myJsonData.lines.length + 1;
    myJsonData.nodes.forEach(n => {
        if (n.id !== rootId) {
            myJsonData.lines.push({
                id: `l${lineCounter++}`,
                from: rootId,
                to: n.id,
                opacity: 0
            });
        }
    });

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

关键要点：

顺序连线 ID 生成：使用 lineCounter 生成唯一 ID（l6、l7 等）
不可见根连接：带有 opacity: 0 的连线隐藏结构连接
可见子集：仅 5 个特定节点之间的可见关系
圆形排列：节点围绕隐藏根节点圆形定位

绿色主题配置

图使用绿色作为连线的主要颜色：

const graphOptions: RGOptions = {
    debug: false,
    defaultJunctionPoint: RGJunctionPoint.border,
    defaultNodeShape: RGNodeShape.circle,
    defaultLineShape: RGLineShape.StandardStraight,
    defaultNodeWidth: 60,
    defaultNodeHeight: 60,
    defaultLineWidth: 2,
    defaultLineColor: 'green',  // 绿色主题
    layout: {
        layoutName: 'circle'
    }
};

一致节点大小的圆形布局

所有节点渲染为 60x60px 圆形：

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);
};

自定义样式

使用自定义 SCSS 进行附加样式设置：

import './my-relation-graph.scss';

创意使用场景

环境网络可视化：使用绿色主题显示生态关系。显示可见的食物网连接，而到生态系统的不可见根连接保持结构。

财务增长跟踪：可视化投资组合，绿色表示增长。仅显示盈利的投资连接，而隐藏锚点组织布局。

可持续性指标仪表板：围绕中心目标显示可持续性指标。使用绿色突出正面指标，而到目标的不可见连接组织显示。

健康生态系统映射：显示带有绿色代表正面指标的健康因素。显示健康行为之间的相关性，而到整体健康的不可见连接构建图结构。

绿色 IT 基础设施地图：可视化节能数据中心组件。对节能连接使用绿色，而不可见结构链接组织拓扑。

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

带有绿色主题的圆形布局 - 不可见根节点锚定带绿色样式的圆形节点排列