Equity Investment Relationship Analysis

Bidirectional tree layout displaying shareholders (left) and investees (right) with dynamic loading, showing complete capital structure and investment chains.

Functional Overview

This example demonstrates visualization of company equity investment relationships using a bidirectional tree layout that clearly displays investors (shareholders, investors) and investees (subsidiaries, associated companies). The root node is in the center with investors shown on the left and investees on the right. Supports dynamic loading of child node data, allowing users to expand level by level to view complete investment chains.

Implementation of Key Features

Bidirectional Tree Layout

Use root-centered layout with investments and shareholders expanding left and right:

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

Left-side nodes right-aligned, right-side nodes left-aligned, root node centered.

Root Node Center Offset

Manually adjust root node position after layout completes:

const updateNodeStyles = async () => {
    const rootNode = graphInstance.getRootNode()!;
    graphInstance.updateNode(rootNode.id, {
        x: rootNode.x - 100  // Move root node left
    });
};

Ensures root node is truly centered.

Dynamic Expand Direction Control

Dynamically set expand controller position based on node level:

graphInstance.getNodes().forEach((node) => {
    if (node.lot.level < 0) {
        // Investor (left side), expand button on left
        graphInstance.updateNode(node.id, {
            expandHolderPosition: 'left'
        });
    } else if (node.lot.level === 0) {
        // Root node, hide expand button
        graphInstance.updateNode(node.id, {
            expandHolderPosition: 'hide'
        });
    } else {
        // Investee (right side), expand button on right
        graphInstance.updateNode(node.id, {
            expandHolderPosition: 'right'
        });
    }
});

Provides intuitive expand/collapse interaction.

Dynamic Data Loading

Load child data from server when node expands:

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

    // New nodes start from parent node position for animation effect
    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();
};

Avoids loading large amounts of data at once, improving performance.

Multiple Node Types

Support expansion of three types: investment, shareholder, and historical investment:

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' }
    ]
};

Each button type has different data loading logic.

Node Slot Rendering

Render different styles based on node type:

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

Different node types have different visual styles.

Canvas Animation Control

Use canvas animation when adding nodes, disable after layout completes:

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

Provides smooth visual transition effects.

Creative Use Cases

Public Equity Structure Query

Provide public company equity structure query services. Investors and analysts can quickly understand shareholder and investment situations.

Due Diligence Tools

Use in investment due diligence to quickly understand target companies’ complete equity structures and external investments.

Risk and Compliance Management

Help financial institutions identify related transactions and conflicts of interest. Equity relationship visualization makes it easier to discover potential risks.

Anti-Fraud Investigations

Investigate complex equity holdings and related transactions for fraud. Graph visualization reveals hidden relationship networks.

Business Intelligence Analysis

Analyze competitors’ capital operation strategies and layouts. Understand investment directions and strategic partnerships.

Tax Planning

Analyze group internal equity structures to optimize tax planning. Identify transfer pricing and tax optimization opportunities.

Inheritance and Wealth Management

Visualize family business equity structures for high-net-worth clients, supporting wealth succession planning.

M&A Transactions

Analyze target company equity structures in M&A transactions, identifying key shareholders and potential obstacles.

Corporate Governance

Help boards and management understand equity structure impact on corporate governance.

Startup Financing

Show company equity structure and financing history to investors. Enhances transparency and trust.

Supply Chain Finance

Banks use equity relationships to assess supply chain finance risk. Understand core enterprise upstream and downstream relationships.

Government Regulation

Regulators use equity relationship graphs to monitor market concentration and monopolistic behaviors.

Legal Litigation

Lawyers use equity relationship graphs in litigation to show complex company relationships. Help judges and juries understand.

Strategic Planning

Help corporate management conduct strategic planning, analyzing capital allocation and business layouts.

Investment Portfolio Management

Asset management companies visualize investee company equity relationships, supporting investment decisions.