动态网络样式切换

功能概述

本示例演示如何在不改变底层图结构的情况下动态更改网络元素的视觉样式。用户可以在不同的样式主题（例如，企业、技术、极简主义）之间切换，实时更改颜色、线条样式、节点形状和其他视觉属性。

核心特性实现

样式主题定义

const themes = {
    corporate: {
        defaultNodeColor: '#0052cc',
        defaultLineColor: '#42526e',
        defaultNodeShape: RGNodeShape.rect,
        defaultLineShape: RGLineShape.StandardStraight
    },
    technical: {
        defaultNodeColor: '#36b37e',
        defaultLineColor: '#006644',
        defaultNodeShape: RGNodeShape.circle,
        defaultLineShape: RGLineShape.BezierCurve
    },
    minimalist: {
        defaultNodeColor: '#ffffff',
        defaultLineColor: '#dfe1e6',
        defaultNodeShape: RGNodeShape.rect,
        defaultLineShape: RGLineShape.StandardStraight
    }
};

动态样式应用

const applyTheme = (themeName: string) => {
    const theme = themes[themeName];
    graphInstance.updateOptions({
        defaultNodeColor: theme.defaultNodeColor,
        defaultLineColor: theme.defaultLineColor,
        defaultNodeShape: theme.defaultNodeShape,
        defaultLineShape: theme.defaultLineShape
    });

    // 更新现有元素
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNode(node, {
            color: theme.defaultNodeColor
        });
    });
};

创意使用场景

品牌定制：使图颜色与企业品牌匹配。

可访问性：切换到高对比度主题以提高可见性。

演示模式：针对不同受众的不同风格。

打印与屏幕：针对不同媒体优化颜色。

深色模式：在浅色和深色主题之间切换。

修改关系网布局和和样式