Relation Graph

Functional Overview

This example demonstrates industry chain graph visualization, automatically assigning different colors and styles to nodes based on their level in the industry chain. Users can view industry chain structures at different depths through expand/collapse controls, supporting expansion to specified levels. This is particularly useful for analyzing and displaying complex upstream and downstream industry relationships.

Implementation of Key Features

Level-Based Coloring System

Automatically assign colors to nodes based on their level in the industry chain:

const openByLevel = async (level: number) => {
    const nodes = graphInstance.getNodes();
    const levelColors = ['#5b05f1', '#FD8B37', '#9b9903', '#247c02'];
    nodes.forEach(node => {
        const nodeLevel = Math.abs(node.lot.level || 0);
        graphInstance.updateNode(node, {
            color: levelColors[nodeLevel] || '#247c02',
            expanded: nodeLevel < level,
            className: 'my-industy-node-level-' + nodeLevel
        });
    });

    await graphInstance.doLayout();
};

Each level uses a different color, making the industry chain structure clear at a glance.

Dynamic Level Expansion

Control expansion to specified levels:

const openByDeep = async(deep: number) => {
    console.log('Node openByLevel:', deep);
    await openByLevel(deep);
    graphInstance.zoomToFit();
};

<SimpleUISelect
    data={[
        { value: 1, text: '2' },
        { value: 2, text: '3' },
        { value: 3, text: '4' }
    ]}
    onChange={(newValue: number) => {
        openByDeep(newValue);
    }}
/>

Users can choose to expand to level 2, 3, or 4, dynamically adjusting the industry chain display range.

Tree Layout Configuration

Use top-to-bottom tree layout:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        from: 'top',
        treeNodeGapH: 10,
        treeNodeGapV: 120,
        alignItemsX: 'center'
    },
    reLayoutWhenExpandedOrCollapsed: true,
    defaultExpandHolderPosition: 'bottom'
};

120px vertical spacing provides ample display space for industry chain nodes.

Custom Node Rendering

Display different headers based on node level:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        const level = node.lot?.level || 0;
        let headerText = "Product Type";
        if (level === 0) headerText = "Industry Chain Name";
        else if (level === 1) headerText = "Industry Link";
        else if (level === 2) headerText = "Subsection Link";

        return (
            <div className={`my-industy-node my-industy-node-level-${level}`}>
                <div className="my-card-header">{headerText}</div>
                <div className="my-card-body">{node.text}</div>
            </div>
        );
    }}
</RGSlotOnNode>

Nodes at different levels have different labels, providing clear level information.

Loading State Management

Use loading state to improve user experience:

graphInstance.loading();
await graphInstance.setJsonData(myJsonData);
await openByLevel(1);
graphInstance.moveToCenter();
graphInstance.zoomToFit();
graphInstance.clearLoading();

Display loading indicator during data loading, preventing user interaction before ready.

Mini-Map Integration

Optional thumbnail mini-map helps navigate large industry chains:

<SimpleUIBoolean currentValue={showMiniView} onChange={setShowMiniView} label="Show graph minimap" />

<RGSlotOnView>
    {showMiniView && <RGMiniView />}
</RGSlotOnView>

Users can toggle mini-map display for better navigation experience.

Creative Use Cases

Industry Chain Analysis

Analyze complete industry chains from raw materials to final products. For example, semiconductor, automotive, or new energy industry chains.

Supply Chain Management

Visualize company supply chain structures, identifying key suppliers and distributors. Help discover supply chain risks and opportunities.

Investment Decision Support

Provide investors with visualizations of upstream and downstream relationships. Help understand investment targets’ position and importance in the entire industry chain.

Policy Making

Government agencies use industry chain graphs to analyze economic structure and formulate industry policies and support measures. Identify key links and bottlenecks.

Competitive Intelligence

Analyze competitors’ positions in the industry chain. Understand their business scope and strategic layout. Identify potential partners or acquisition targets.

Risk Assessment

Evaluate risk transmission paths in industry chains. For example, how upstream raw material price fluctuations affect downstream product costs.

Education and Training

Teach industry chain concepts in business education. Students can better understand complex industry relationships through visualization.

Market Entry Strategy

Help companies evaluate strategies for entering new markets. By analyzing industry chains, determine optimal entry points.

Industrial Cluster Analysis

Study industrial clusters in specific regions. Understand how related companies form ecosystems. Support industrial park planning.

Technology Roadmap

Show technology development paths in industry chains. For example, the path from basic research to applied technology to commercial products.

Industy Chain Graph

Industry Chain Visualization with Level-Based Styling