组织架构图交互需HTML+CSS+JS协同实现，推荐+Flex/Grid或方案，禁用；须用事件委托绑定click/mouseenter，部门数据与DOM通过data属性及Map双向关联，并统一坐标系校准。
组织架构图本身不能直接“映射区域”——必须靠 HTML 元素 + CSS 定位 + JavaScript 事件绑定三者配合，才能实现点击某部门跳转、悬停显示负责人、高亮上下游等交互效果。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
用 <div> 或 <code><svg></svg> 布局比用表格更可控
很多人第一反应是套 <table> 做树形缩进，但表格单元格无法自由定位、难以响应式缩放、hover 区域难对齐。实际项目中推荐两种方式：
<ul><li><code><div> + Flex/Grid：每个节点用带 <code>data-dept-id 的 <div>，用 CSS 控制层级缩进和连接线（伪元素或绝对定位）
<li>
<code><svg></svg>：适合复杂连线、动画或需要精确坐标映射的场景，每个 <g></g> 组可绑定完整部门数据，getScreenCTM() 和 getBBox() 能精准计算点击落点
<map></map> + <area>：坐标维护成本高，不支持嵌套、无语义、移动端点击热区不准
click 和 mousemove 事件要区分绑定目标
组织图常需同时支持“点部门查看详情”和“悬停显示汇报链”，但直接在根容器上监听会丢失目标精度：
- 用事件委托：给最外层容器绑定
click，再用event.target.closest('[data-dept-id]')捕获真实点击节点 - 悬停提示建议用
mouseenter+mouseleave，而非mousemove：后者触发太频繁，易卡顿且难以防抖 - 如果用了
<svg></svg>，注意event.target可能是<text></text>或<circle></circle>子元素，要用event.target.parentNode或closest('g')回溯到部门组
部门数据与 DOM 元素必须双向关联
光有视觉结构不够，点击后要能查到上级、下级、负责人邮箱等，这就要求数据和元素强绑定：
立即学习“前端免费学习笔记（深入）”；
- 每个节点元素必须带唯一标识，比如
data-dept-id="hr-202"，而不是靠 class 名或顺序索引 - 把完整部门对象存在
dataset里（注意只存轻量字段），如：el.dataset.manager = "zhangsan@company.com" - 不要在 JS 里硬编码映射关系，而是初始化时从 JSON 数据生成 DOM，并同步建立
Map索引：deptMap.set('hr-202', deptData) - 当架构动态更新（如新增部门），必须同步更新 DOM 和 Map，否则
dataset会滞后
最容易被忽略的是坐标系一致性：SVG 内部坐标、CSS transform 缩放、viewport 缩放三者叠加后，getBoundingClientRect() 返回的位置可能和视觉位置偏差几十像素——做拖拽定位或弹窗锚定前，务必先统一用 getScreenCTM() 校准。
