组织架构图交互需HTML+CSS+JS协同实现，推荐+Flex/Grid或方案，禁用；须用事件委托绑定click/mouseenter，部门数据与DOM通过data属性及Map双向关联，并统一坐标系校准。

组织架构图本身不能直接“映射区域”——必须靠 HTML 元素 + CSS 定位 + JavaScript 事件绑定三者配合，才能实现点击某部门跳转、悬停显示负责人、高亮上下游等交互效果。

用

或 布局比用表格更可控

很多人第一反应是套

做树形缩进，但表格单元格无法自由定位、难以响应式缩放、hover 区域难对齐。实际项目中推荐两种方式：

• + Flex/Grid：每个节点用带 data-dept-id 的

  ，用 CSS 控制层级缩进和连接线（伪元素或绝对定位）
• ：适合复杂连线、动画或需要精确坐标映射的场景，每个 组可绑定完整部门数据，getScreenCTM() 和 getBBox() 能精准计算点击落点
• 避免用 + ：坐标维护成本高，不支持嵌套、无语义、移动端点击热区不准

click 和 mousemove 事件要区分绑定目标

组织图常需同时支持“点部门查看详情”和“悬停显示汇报链”，但直接在根容器上监听会丢失目标精度：

• 用事件委托：给最外层容器绑定 click，再用 event.target.closest('[data-dept-id]') 捕获真实点击节点
• 悬停提示建议用 mouseenter + mouseleave，而非 mousemove：后者触发太频繁，易卡顿且难以防抖
• 如果用了 ，注意 event.target 可能是 或 子元素，要用 event.target.parentNode 或 closest('g') 回溯到部门组

部门数据与 DOM 元素必须双向关联

光有视觉结构不够，点击后要能查到上级、下级、负责人邮箱等，这就要求数据和元素强绑定：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 每个节点元素必须带唯一标识，比如 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() 校准。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！