关键在于构建数据驱动、分层建模、智能连线、响应式可访问的结构化系统：用JSON定义节点/边/分组，实现逻辑图层，/区分关系类型，viewBox适配多端，DOM与坐标计算分离。
用 HTML5 SVG 制作复杂的组织架构关系图谱，关键不是“画线连线”，而是构建一套可扩展、可维护、支持交互的结构化系统。它需要数据驱动布局、分层容器管理、语义化图形表达，以及轻量但精准的 JavaScript 控制逻辑。
用数据定义结构，而非手动排节点
组织架构图谱的本质是树状+网状混合结构（比如虚线汇报、跨部门协作、矩阵式管理）。不能靠写死 <circle cx="200" cy="150"></circle> 堆砌节点。应先设计清晰的数据模型：
- 每个节点包含
id、name、title、type（如“正式主管”“虚线汇报”“外部顾问”） - 每条边明确
source和target，并带relation字段（如"direct"、"matrix"、"advisory"） - 支持层级分组：用
group字段或嵌套子数组表示部门/中心/BU，后续映射为<g></g>容器
用 分层建模，实现逻辑图层
SVG 没有原生图层，但 <g></g> 元素天然适合作为逻辑图层载体。一个典型组织图谱可拆分为：
-
<g id="nodes"></g>：所有人员节点（<circle></circle>或<rect></rect>），统一控制 hover 样式与点击行为 -
<g id="edges"></g>：连接线集合，按relation类型设不同 class（如.edge-direct、.edge-matrix），CSS 控制线型、颜色、箭头 -
<g id="groups"></g>：部门边界框、背景色块、标题文字，用<rect></rect>+<text></text>实现，z-order 置底 -
<g id="labels"></g>：悬浮标签、职位说明等辅助信息，通过pointer-events="none"避免遮挡交互
所有 <g></g> 按需设置 transform（如平移缩放），不修改单个节点坐标，便于整体拖拽与缩放。
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
连线要智能，不只靠
简单直线无法表达复杂关系。实际中需组合使用：
- 直连关系（上下级）→ 用
<line></line>，配合<defs><marker></marker></defs>添加实心箭头 - 矩阵汇报、协作链路 → 用
<path></path>绘制带圆角的正交折线（如d="M x1 y1 H x2 V y2 H x3"），视觉上区分主从路径 - 动态连线（拖拽时实时更新）→ 在 JS 中持有每条边的 source/target 引用，监听节点
transform变化后重算端点，批量更新x1/y1/x2/y2或d属性
所有连线必须绑定 data-source 和 data-target，点击某条线即可定位到对应两人，支撑右键菜单、关系详情弹窗等交互。
支持响应式与可访问性
组织图谱常需在大屏展示、会议投屏、甚至移动端查看。核心做法：
- 整个
<svg></svg>使用viewBox="0 0 1200 800"，不设固定 width/height；容器用 CSS 百分比宽高，SVG 自动缩放 - 文字大小用
px固定（避免缩放后过小），关键节点加<title>姓名 - 职位</title>，鼠标悬停即显示，也供屏幕阅读器识别 - 为不同角色节点添加
role="img"和aria-label，例如：<circle ... aria-label="张三，技术总监，直属上级：李四"></circle> - 导出功能直接序列化
<svg></svg>内容为字符串，用blob:URL 触发下载，无需依赖服务端
不复杂但容易忽略：保持坐标计算与 DOM 渲染分离。先遍历数据生成所有节点位置对象数组（含 x、y、width、height、edges），再统一注入 SVG，调试布局、切换主题、加动画都更可控。
