Relation Graph

功能概述

此示例展示了公司股权投资关系的可视化，使用双向树形布局清晰展示投资方（股东、投资人）和被投资方（子公司、参股公司）的关系。根节点在中间，投资方显示在左侧，被投资方显示在右侧。支持动态加载子节点数据，用户可以逐级展开查看完整的投资链路。

核心特性实现

双向树形布局

使用根节点居中的布局，投资和被投资关系分别向左右展开：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 100,
        treeNodeGapV: 10,
        alignItemsX: 'start',
        alignParentItemsX: 'end'
    },
    defaultExpandHolderPosition: 'bottom',
    defaultLineShape: RGLineShape.StandardOrthogonal
};

左侧节点右对齐，右侧节点左对齐，根节点居中。

根节点居中偏移

在布局完成后手动调整根节点位置：

const updateNodeStyles = async () => {
    const rootNode = graphInstance.getRootNode()!;
    graphInstance.updateNode(rootNode.id, {
        x: rootNode.x - 100  // 将根节点向左移动
    });
};

确保根节点真正位于中心位置。

动态展开方向控制

根据节点层级动态设置展开控制器位置：

graphInstance.getNodes().forEach((node) => {
    if (node.lot.level < 0) {
        // 投资方（左侧），展开按钮在左侧
        graphInstance.updateNode(node.id, {
            expandHolderPosition: 'left'
        });
    } else if (node.lot.level === 0) {
        // 根节点，隐藏展开按钮
        graphInstance.updateNode(node.id, {
            expandHolderPosition: 'hide'
        });
    } else {
        // 被投资方（右侧），展开按钮在右侧
        graphInstance.updateNode(node.id, {
            expandHolderPosition: 'right'
        });
    }
});

提供直观的展开/折叠交互。

动态数据加载

在节点展开时从服务器加载子数据：

const onNodeExpand = async (node: RGNode, e: RGUserEvent) => {
    if (node.data.childrenLoaded) return;
    node.data.childrenLoaded = true;

    graphInstance.loading('Loading data from remote server...');
    const newNodeAndLines = await fetchCompanyNodeChildren(node.id);

    // 新节点从父节点位置开始，产生动画效果
    newNodeAndLines.nodes.forEach((n) => {
        n.x = node.x;
        n.y = node.y;
    });

    graphInstance.addNodes(newNodeAndLines.nodes);
    graphInstance.addLines(newNodeAndLines.lines);
    graphInstance.clearLoading();
    await graphInstance.doLayout();
    updateNodeStyles();
};

避免一次性加载大量数据，提高性能。

多种节点类型

支持投资、股东和历史投资三种类型的展开：

const myJsonData: RGJsonData = {
    nodes: [
        { id: 'root', text: 'Tian Technology Co., Ltd.' },
        { id: 'root-invs', text: 'Investment', expandHolderPosition: 'left', data: { myType: 'investment-button' } },
        { id: 'root-sh', text: 'Share Holder', expandHolderPosition: 'left', data: { myType: 'shareholder-button' } },
        { id: 'root-history-invs', text: 'Historical Investment', expandHolderPosition: 'left', data: { myType: 'historical-investment-button' } }
    ],
    lines: [
        { from: 'root', to: 'root-invs' },
        { from: 'root-sh', to: 'root' },
        { from: 'root-history-invs', to: 'root' }
    ]
};

每个按钮类型有不同的数据加载逻辑。

节点插槽渲染

根据节点类型渲染不同的样式：

const NodeSlot: React.FC<RGNodeSlotProps> = ({ node }) => {
    const myType = node.data.myType;
    const buttonTypes = ['investment-button', 'shareholder-button', 'historical-investment-button'];

    if (buttonTypes.includes(myType)) {
        return <div className="my-node my-button-node">{node.text}</div>;
    } else if (myType === 'root') {
        return <div className="my-node my-root">{node.text}</div>;
    } else {
        return <div className="my-node">{node.text}</div>;
    }
};

不同类型的节点有不同的视觉样式。

画布动画控制

在添加节点时使用画布动画，布局完成后禁用：

graphInstance.enableCanvasAnimation();
graphInstance.setCanvasCenter(node.x + node.el_W / 2, node.y);
await graphInstance.sleep(400);
graphInstance.disableCanvasAnimation();
await graphInstance.doLayout();

提供平滑的视觉过渡效果。

创意使用场景

企业股权结构查询

提供公开的企业股权结构查询服务。投资者、分析师可以快速了解公司的股东和投资情况。

尽职调查工具

在投资尽职调查中使用，快速了解目标公司的完整股权结构和对外投资。

风险合规管理

帮助金融机构识别关联交易和利益冲突。可视化股权关系更容易发现潜在风险。

反欺诈调查

调查复杂的股权代持、关联交易等欺诈行为。图可视化揭示隐藏的关系网络。

商业情报分析

分析竞争对手的资本运作策略和布局。了解投资方向和战略合作。

税务筹划

分析集团内股权结构，优化税务筹划。识别转移定价和税务优化的机会。

继承和财富管理

为高净值客户可视化家族企业的股权结构，支持财富传承规划。

并购交易

在并购交易中分析目标公司的股权结构，识别关键股东和潜在障碍。

公司治理

帮助董事会和管理层理解股权结构对公司治理的影响。

创业融资

向投资人展示公司的股权结构和融资历史。增强透明度和信任。

供应链金融

银行使用股权关系评估供应链金融风险。了解核心企业的上下游关系。

政府监管

监管部门使用股权关系图监控市场集中度和垄断行为。

法律诉讼

律师使用股权关系图在诉讼中展示复杂的公司关系。帮助法官和陪审团理解。

战略规划

帮助企业管理层进行战略规划，分析资本配置和业务布局。

投资组合管理

资产管理公司可视化被投企业的股权关系，支持投资决策。

股权架构图

股权投资关系分析