最小化节点样式

演示在树形布局中使用仅 CSS 而无需自定义节点插槽的简洁、最小化的节点样式方法。

最小化节点样式

功能概述

本示例演示了一种简洁、最小化的节点样式方法，仅使用 CSS 而无需自定义节点插槽。树形布局配置了透明节点和自定义间距，以呈现简化的视觉效果。

核心特性实现

最小化配置

const graphOptions: RGOptions = {
    backgroundColor: '#ffffff',
    defaultLineColor: '#444',
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 0,
    defaultNodeBorderColor: 'transparent',
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    toolBarDirection: 'h',
    toolBarPositionH: 'right',
    toolBarPositionV: 'bottom',
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 310,
        treeNodeGapV: 70
    }
};

仅数据方法

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'a' },
        { id: 'b', text: 'b' },
        { id: 'b1', text: 'b1' }
    ],
    lines: [
        { from: 'a', to: 'b', text: '' },
        { from: 'b', to: 'b1', text: '' }
    ]
};

无需自定义插槽 - 图谱使用带有 CSS 样式的默认节点渲染。

创意使用场景

数据结构可视化：以最小的视觉噪音显示分层数据结构。专注于关系而非复杂的节点设计。

文件系统树：将目录结构显示为简洁的树。节点是带有显示层次结构的连接线的简单文本标签。

依赖关系图：以简洁、技术性的美学可视化包或模块依赖关系。透明节点将焦点放在连接上。

组织架构图：仅带姓名的简单组织层次结构。消除大型组织的视觉混乱。

分类显示：清晰地显示分类层次结构。最小化设计帮助用户浏览复杂的分类。

流程大纲：仅带步骤名称的高级流程。用于演示和文档。

菜单结构：可视化网站或应用程序菜单层次结构。简洁的呈现有助于导航设计。