带有自定义图标的基础中心布局 - 带有图标增强节点和小地图的简单图设置

带有自定义图标的基础中心布局

功能概述

本示例演示了一个简单的中心布局关系图，具有来自 Lucide React 的自定义图标节点。它展示了基本设置模式，包括 RGProvider 包装器、用于图实例访问的 RGHooks、自定义节点组件和小地图导航功能。图使用表示公司投资关系的静态数据，使用不同的图标类型进行视觉分类。

核心特性实现

基本 RGProvider 和 Hook 模式

演示包装图和访问实例的标准 v3.x 模式：

// 入口点 (index.tsx)
const Demo = () => {
    return (
        <RGProvider>
            <MyGraph />
        </RGProvider>
    );
};

// 图组件 (MyGraph.tsx)
const MyGraph: React.FC = () => {
    const graphInstance = RGHooks.useGraphInstance();
    // ... 图逻辑
};

关键要点：

• RGProvider 包装器：上下文所需的顶层包装
• RGHooks.useGraphInstance()：替换 v2.x 中基于 ref 的实例访问
• 组件分离：入口组件将图组件包装在提供者中

带有图标元数据的静态图数据

使用带有自定义图标数据属性的静态 JSON 数据：

const staticJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        { id: '2', text: 'Initrode', width: 100, height: 100, data: { myicon: 'delivery_truck' } },
        { id: '1', text: 'Paper Street Soap Co.', data: { myicon: 'fries' } },
        { id: '3', text: 'Cyberdyne Systems', data: { myicon: 'football' } },
        { id: '4', text: 'Tyrell Corporation', data: { myicon: 'desktop' } },
        { id: '6', text: 'Weyland-Yutani', data: { myicon: 'fries' } },
        { id: '7', text: 'Hooli', data: { myicon: 'desktop' } },
        { id: '8', text: 'Vehement Capital', data: { myicon: 'football' } },
        { id: '9', text: 'Omni Consumer Products', data: { myicon: 'football' } },
        { id: '71', text: 'Stark Industries', data: { myicon: 'delivery_truck' } },
        { id: '72', text: 'Buy n Large', data: { myicon: 'fries' } },
        { id: '73', text: 'Binford Tools', data: { myicon: 'delivery_truck' } },
        { id: '81', text: 'Initech', data: { myicon: 'fries' } },
        { id: '82', text: 'Aperture Science', data: { myicon: 'desktop' } },
        { id: '83', text: 'Prestige Worldwide', data: { myicon: 'delivery_truck' } },
        { id: '84', text: 'Massive Dynamic', data: { myicon: 'football' } },
        { id: '85', text: 'Virtucon', data: { myicon: 'delivery_truck' } },
        { id: '91', text: 'Acme Corp', data: { myicon: 'football' } },
        { id: '92', text: 'Nakatomi Trading', data: { myicon: 'football' } },
        { id: '5', text: 'Los Pollos Hermanos', data: { myicon: 'burger' } }
    ],
    lines: [
        { from: '7', to: '71', text: 'Invest' },
        { from: '7', to: '72', text: 'Invest' },
        { from: '7', to: '73', text: 'Invest' },
        { from: '8', to: '81', text: 'Invest' },
        { from: '8', to: '82', text: 'Invest' },
        { from: '8', to: '83', text: 'Invest' },
        { from: '8', to: '84', text: 'Invest' },
        { from: '8', to: '85', text: 'Invest' },
        { from: '9', to: '91', text: 'Invest' },
        { from: '9', to: '92', text: 'Invest' },
        { from: '1', to: '2', text: 'Invest' },
        { from: '3', to: '1', text: 'Executive' },
        { from: '4', to: '2', text: 'Executive' },
        { from: '6', to: '2', text: 'Executive' },
        { from: '7', to: '2', text: 'Executive' },
        { from: '8', to: '2', text: 'Executive' },
        { from: '9', to: '2', text: 'Executive' },
        { from: '1', to: '5', text: 'Invest' }
    ]
};

关键要点：

• 自定义 data 属性：每个节点都有 data.myicon 用于图标类型
• 调整大小的根节点：节点 ‘2’ 有明确的宽度/高度（100x100）
• 连线标签：投资关系标记为"Invest"、“Executive”
• 类型注解：使用 as JsonNode[] 和 as JsonLine[] 进行 TypeScript 类型标注

中心布局配置

const graphOptions: RGOptions = {
    debug: true,
    defaultLineShape: 1,  // RGLineShape.StandardStraight
    defaultNodeShape: RGNodeShape.circle,
    defaultNodeWidth: 60,
    defaultNodeHeight: 60,
    defaultLineTextOnPath: true,
    layout: {
        layoutName: 'center',
        maxLayoutTimes: 3000
    },
    defaultExpandHolderPosition: 'right',
    reLayoutWhenExpandedOrCollapsed: true
};

带有图标的自定义节点组件

CustomNode 组件根据节点数据渲染 Lucide 图标：

// CustomNode.tsx（假设的实现）
const CustomNode: React.FC<RGNodeSlotProps> = ({ node, checked, dragging }) => {
    const iconMap = {
        delivery_truck: TruckIcon,
        fries: CoffeeIcon,
        football: FootballIcon,
        desktop: DesktopIcon,
        burger: BurgerIcon
    };
    const IconComponent = iconMap[node.data.myicon] || DefaultIcon;

    return (
        <div className={`custom-node ${checked ? 'checked' : ''} ${dragging ? 'dragging' : ''}`}>
            <IconComponent size={24} />
            <div className="node-text">{node.text}</div>
        </div>
    );
};

基于插槽的节点自定义

使用 RGSlotOnNode 组件注入自定义节点渲染：

<RelationGraph options={graphOptions} onNodeClick={onNodeClick} onLineClick={onLineClick}>
    <RGSlotOnNode>
        {({ node, checked, dragging }: RGNodeSlotProps) => (
            <CustomNode node={node} checked={checked} dragging={dragging} />
        )}
    </RGSlotOnNode>
    <RGSlotOnView>
        <RGMiniView />
    </RGSlotOnView>
</RelationGraph>

关键要点：

• 插槽模式：替换 v2.x 的 nodeSlot 属性
• Props 解构：接收节点、选中、拖动状态
• 小地图：在 RGSlotOnView 插槽中使用 RGMiniView

事件处理器

返回 true 以实现默认行为的标准点击处理器：

const onNodeClick = (node: RGNode, e: RGUserEvent) => {
    console.log('onNodeClick:', node.text);
    return true;
};

const onLineClick = (line: RGLine, link: RGLink, e: RGUserEvent) => {
    console.log('onLineClick:', line.text, line.from, line.to);
    return true;
};

图初始化

const initializeGraph = async () => {
    await graphInstance.setJsonData(staticJsonData);
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

useEffect(() => {
    initializeGraph();
}, []);

创意使用场景

企业投资组合管理： 使用代表行业部门的图标（科技、制造、食品等）可视化公司投资和子公司。使用不同图标进行视觉分类。

初创企业生态系统映射： 显示带有图标表示其商业模式（SaaS、市场、硬件）的初创企业。显示初创企业和投资者之间的资金关系。

供应链可视化： 使用代表其角色（制造商、物流、零售）的图标映射供应商和分销商。显示材料流向和供应商关系。

组织结构： 显示带有基于角色的图标（工程、销售、人力资源）的公司部门。显示报告线和跨职能团队。

产品功能依赖关系： 使用代表组件类型（API、UI、数据库）的图标可视化软件功能。显示功能和模块之间的依赖关系。