路线图数据结构

概述

roadmap.sh 平台使用结构化的 JSON 格式来定义路线图。每个路线图由两个主要部分组成：

内容数据 - 路线图主题的实际内容，包括标题、描述和学习资源
可视化数据 - 定义路线图如何视觉呈现的布局信息

这两种数据结构协同工作，以创建用户可以探索的交互式路线图。

内容数据结构

每个路线图的内容数据存储在 public/roadmap-content/ 目录中的 JSON 文件中。每个路线图都有一个以路线图名称命名的 JSON 文件（例如，python.json、backend.json 等）。

基本结构

内容 JSON 文件被组织为扁平对象，其中每个键是主题的唯一标识符，值是包含该主题信息的对象。

主题对象属性

每个主题对象具有以下结构：

属性	类型	描述
`title`	字符串	主题名称
`description`	字符串	关于主题的详细信息
`links`	数组	学习资源集合

links 数组中的每个项都包含：

属性	类型	描述
`title`	字符串	资源的标题
`url`	字符串	资源的 URL
`类型`	字符串	资源的类型（例如，“article”、“video”、“course”）

内容结构示例

以下是 Python 路线图内容文件中的一个简化示例：

{
  "6xRncUs3_vxVbDur567QA": {
    "title": "Basic Syntax",
    "description": "Setup the environment for python and get started with the basics.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "W3Schools - Python",
        "url": "https://w3schools.org.cn/python/",
        "type": "article"
      },
      {
        "title": "Python Basics",
        "url": "https://tutorialspoint.org.cn/python/python_basic_syntax.htm",
        "type": "article"
      }
    ]
  }
}

来源：public/roadmap-content/python.json1-32

可视化数据结构

可视化数据存储在 src/data/roadmaps/ 目录中的 JSON 文件中。这些文件定义了路线图应该如何视觉呈现。

基本结构

可视化 JSON 文件包含一个 nodes 数组，其中每个节点代表可视化路线图中的一个元素。

节点对象属性

每个节点对象通常具有以下属性：

属性	类型	描述
`id`	字符串	节点的唯一标识符
`类型`	字符串	节点类型（例如，“topic”、“subtopic”、“section”、“vertical”）
`position`	对象	用于定位的 X 和 Y 坐标
`data`	对象	包括标签和样式信息的附加数据
`width`	数字	节点宽度
`height`	数字	节点高度

可视化结构示例

以下是 DevOps 路线图可视化文件中的一个简化示例：

{
  "nodes": [
    {
      "id": "v5FGKQc-_7NYEsWjmTEuq",
      "type": "topic",
      "position": {
        "x": 1602.7802652868972,
        "y": 229.3007298193524
      },
      "selected": false,
      "data": {
        "label": "Learn a Programming Language",
        "style": {
          "fontSize": 17,
          "justifyContent": "flex-start",
          "textAlign": "center"
        },
        "oldId": "43OZ35TemharSqfrst0Pv"
      },
      "width": 294,
      "height": 49
    }
  ]
}

来源：src/data/roadmaps/devops/devops.json503-534

内容与可视化之间的关系

内容数据和可视化数据通过 ID 连接起来。可视化数据中的节点 ID 对应于内容数据中的主题 ID。

内容和可视化的分离允许：

独立更新内容而不影响布局
同一内容支持多种可视化布局
更简单的维护和更新

来源：根据提示中提供的系统架构图。

内容结构变体

尽管基本结构一致，但不同路线图之间存在一些差异：

主题关系

某些路线图包含主题之间的层次关系。

这通常通过可视化数据中的链接来表示，而不是在内容结构中明确体现。

特殊字段

某些主题对象可能包含用于特殊目的的附加字段：

legend - 用于指示主题重要性或分类
oldId - 用于与先前版本保持向后兼容性

来源：src/data/roadmaps/devops/devops.json550-556

文件组织

路线图数据文件组织如下：

目录	目的
`public/roadmap-content/`	包含内容 JSON 文件
`src/data/roadmaps/`	包含可视化 JSON 文件

每个路线图通常有：

一个内容文件位于 public/roadmap-content/[路线图名称].json
一个可视化文件位于 src/data/roadmaps/[路线图名称]/[路线图名称].json

来源：public/roadmap-content/python.json src/data/roadmaps/devops/devops.json

数据使用流程

下图展示了路线图数据在应用程序中的流向：

当用户查看路线图时：

可视化数据用于渲染路线图布局。
当用户点击某个主题时，加载内容数据以显示详细信息。
用户进度会被跟踪，并可在不同设备之间同步。

来源：基于提示中提供的系统架构图

结论

developer-roadmap 仓库中的路线图数据结构旨在将内容与可视化分离，从而更易于维护和更新。内容以扁平的 JSON 文件存储，每个主题都有唯一的 ID，而可视化数据则定义了路线图应如何视觉呈现。

这种分离提供了路线图呈现方式的灵活性，并允许内容和布局的独立更新。

路线图数据结构

概述

内容数据结构

基本结构

主题对象属性

内容结构示例

可视化数据结构

基本结构

节点对象属性

可视化结构示例

内容与可视化之间的关系

内容结构变体

主题关系

特殊字段

文件组织

数据使用流程

结论

本页内容