Relation Graph

功能概述

此示例展示了产业链图的可视化，根据节点在产业链中的层级自动分配不同的颜色和样式。用户可以通过展开/折叠控制来查看不同深度的产业链结构，支持按层级展开到指定深度。这对于分析和展示复杂的产业上下游关系非常有用。

核心特性实现

层级着色系统

根据节点在产业链中的层级自动分配颜色：

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

每个层级使用不同的颜色，使产业链结构一目了然。

动态层级展开

控制展开到指定层级：

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

用户可以选择展开到第 2、3 或 4 层，动态调整产业链的显示范围。

树形布局配置

使用自上而下的树形布局：

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

垂直方向 120px 的间距为产业链节点提供足够的展示空间。

自定义节点渲染

根据节点层级显示不同的标题：

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

不同层级的节点有不同的标签，提供清晰的层级信息。

加载状态管理

使用加载状态提升用户体验：

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

在数据加载期间显示加载指示器，防止用户在未准备好时交互。

小地图集成

可选的缩略图小地图帮助导航大型产业链：

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

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

用户可以切换小地图的显示以获得更好的导航体验。

创意使用场景

产业链分析

分析特定行业的完整产业链，从原材料到最终产品。例如，半导体产业、汽车产业或新能源产业链。

供应链管理

可视化公司的供应链结构，识别关键供应商和分销商。帮助发现供应链中的风险和机会。

投资决策支持

为投资者提供产业上下游关系的可视化，帮助理解投资标的在整个产业链中的位置和重要性。

政策制定

政府机构使用产业链图分析经济结构，制定产业政策和支持措施。识别关键环节和瓶颈。

竞争情报

分析竞争对手在产业链中的位置，了解其业务范围和战略布局。识别潜在的合作伙伴或收购目标。

风险评估

评估产业链中的风险传导路径。例如，上游原材料价格波动如何影响下游产品成本。

教育和培训

在商业教育中教授产业链概念。学生可以通过可视化更好地理解复杂的产业关系。

市场进入策略

帮助公司评估进入新市场的策略。通过分析产业链确定最佳切入点。

产业集群分析

研究特定地区的产业集群，了解相关企业如何形成生态系统。支持产业园区规划。

技术路线图

展示技术发展的产业链路径。例如，从基础研究到应用技术再到商业化产品的路径。

产业链图谱

产业链可视化与层级着色