BraceMap 大括号结构图测试
#组件
#d3.js
#可视化
#BraceMap
BraceMap 大括号结构图#
大括号结构图（Brace Map）是一种用于展示整体与部分关系的思维工具，常用于知识分解和结构化分析。
💡 提示
本笔记用于测试自定义的 BraceMap 组件，该组件使用 d3.js 动态渲染 SVG 大括号结构图。
示例 1：HTML 页面结构#
下面是一个 HTML 页面的基本结构分解：
示例 2：Linux 文件系统#
Linux 文件系统的层次结构：
示例 3：自定义样式#
使用自定义配色的大括号图：
示例 4：三层嵌套结构#
支持更深层次的嵌套：
技术说明#
✨ 技巧
BraceMap 组件特性：
- 使用 d3.js 动态渲染 SVG
- 支持任意层级的嵌套结构
- 自动适配暗色模式
- 支持自定义样式配置
- 兼容 Astro View Transitions
使用方法#
import BraceMap from "../../components/mdx/BraceMap.astro";
<BraceMap
data={{
name: "根节点",
children: [
{ name: "子节点 1" },
{ name: "子节点 2" },
],
}}
/>可配置参数#
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
nodeWidth | number | 160 | 节点宽度 |
nodeHeight | number | 32 | 节点高度 |
levelGap | number | 60 | 层级间距 |
braceWidth | number | 14 | 大括号弯曲宽度 |
braceColor | string | #666 | 大括号颜色 |
rootBgColor | string | #4a7cff | 根节点背景色 |