svelte-gantt项目排期：用SvelteGanttDependencies模块画出任务依赖关系的完整指南

svelte-gantt项目排期用SvelteGanttDependencies模块画出任务依赖关系的完整指南【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-ganttsvelte-gantt是一款轻量、零依赖的交互式 JavaScript 甘特图组件由 Svelte 构建可兼容任何前端框架。它的SvelteGanttDependencies模块能在任务条之间自动绘制带箭头的依赖连线让项目排期中的谁依赖谁一目了然。本教程面向新手带你用 5 分钟完成任务依赖关系的可视化配置。为什么甘特图需要依赖关系线项目排期中任务很少孤立存在需求评审要等文档完成、上线要等测试通过。若只画时间条读者无法判断任务的先后约束。svelte-gantt的依赖模块解决的就是这个问题自动连线根据任务 ID 自动计算箭头起点与终点无需手动排版智能走线同层任务直线连接跨层任务自动绕行折线支持起止行隐藏时的特殊形态可定制样式箭头颜色、线宽、箭头大小均可配置高性能仅渲染可视区域内的依赖线大数据集也不卡顿相关源码位于packages/svelte-gantt/src/modules/dependencies/目录核心文件包括GanttDependencies.svelte依赖容器和Dependency.svelte单条依赖线的渲染逻辑。依赖关系的数据结构依赖数据是一个数组每条依赖只需 3 个必填字段字段类型说明idnumber/string依赖线唯一 ID必填fromIdnumber/string起点任务的 ID必填toIdnumber/string终点任务的 ID必填strokestring线条颜色如red或#ff0000可选strokeWidthnumber线条宽度可选arrowSizenumber箭头大小可选字段定义可查看 dependency.ts模型接口为DependencyModel位于packages/svelte-gantt/src/modules/dependencies/dependency.ts。以官方 Demo 为例它定义了 5 条依赖把准备 → 规划 → 开发 → 实施 → 完成串成一条主链路同时让培训并行汇入最终节点dependencies: [ { id: 1, fromId: 1, toId: 2 }, // 准备 → 规划 { id: 2, fromId: 2, toId: 3 }, // 规划 → 开发 { id: 3, fromId: 3, toId: 4 }, // 开发 → 实施 { id: 4, fromId: 4, toId: 5 }, // 实施 → 完成 { id: 5, fromId: 6, toId: 5 } // 培训 → 完成 ]完整示例数据可参考 dependencies/page.svelte路径packages/demo/src/routes/dependencies/page.svelte。三步配置 SvelteGanttDependencies 模块第 1 步安装与引入npm install svelte-ganttimport { SvelteGantt, SvelteGanttDependencies } from svelte-gantt;第 2 步把模块注册到甘特图主体依赖线绘制在甘特图主体区域因此必须将模块放入ganttBodyModulesconst options { rows: rows, // 行资源/泳道 tasks: tasks, // 任务数组 dependencies: dependencies, ganttBodyModules: [SvelteGanttDependencies] }; const gantt new SvelteGantt({ target: document.getElementById(example-gantt), props: options });第 3 步运行时动态更新依赖数据支持随时更新无需重建图表gantt.$set({ dependencies: [ { id: 9, fromId: 3, toId: 7, stroke: #ff0000, strokeWidth: 3 } ], ganttBodyModules: [SvelteGanttDependencies] });依赖线的绘制原理源码解析GanttDependencies.svelte负责性能优化它遍历所有依赖只保留起点或终点位于可视区域内的连线避免滚动时渲染上千条 SVG 路径。Dependency.svelte负责单条线的几何计算逻辑分为三种场景两行均可见从起点任务右侧中点出发的折线连到终点任务左侧中点距离较近时自动加绕行避免重叠起点行被隐藏连线退化为终点处的圆点标记终点行被隐藏连线退化为起点处的圆点标记。箭头头部由arrowPath独立绘制颜色统一读取 CSS 变量--sg-dependency-arrow-color方便全局换肤。这套机制让依赖图在行过滤、行折叠时依然保持正确外观是排期看板交互体验的关键细节。实战建议画出易读的任务依赖图主链路用默认色例外依赖高亮为关键路径外的加急依赖单独设置stroke如stroke: #e74c3c控制依赖线数量只画前置-后继的紧邻关系跨越多层的长依赖会让画面杂乱配合时间范围模块Demo 中同时使用了timeRanges标注午休/晚餐时段帮助资源排期避开不可用时间任务 ID 保持稳定fromId/toId必须与tasks数组中的id一一对应否则依赖线不会显示行隐藏时依赖线自动降级无需额外处理圆点标记会提示此处有一条被截断的依赖常见问题FAQQ1依赖线为什么没有显示先确认ganttBodyModules: [SvelteGanttDependencies]已设置且fromId、toId能在tasks中找到对应任务。两个 ID 都无效时该依赖会被静默跳过。Q2依赖线能拖拽吗依赖线本身不可拖拽但路径上有select-area命中区域可用于事件监听拖拽任务后连线会随任务位置自动重算。Q3如何批量修改箭头颜色覆盖 CSS 变量--sg-dependency-arrow-color即可全局生效无需逐条修改stroke。总结SvelteGanttDependencies是 svelte-gantt 排期能力的关键拼图只需一个dependencies数组加一行模块注册就能让甘特图从时间条列表升级为完整的项目依赖视图。结合其树形视图、缩放、事件系统等模块可以快速搭建出专业的项目排期与资源预订系统。想继续深入建议按以下顺序阅读源码依赖数据模型packages/svelte-gantt/src/modules/dependencies/dependency.ts依赖渲染容器可视性过滤packages/svelte-gantt/src/modules/dependencies/GanttDependencies.svelte单条依赖线绘制packages/svelte-gantt/src/modules/dependencies/Dependency.svelte完整可运行示例packages/demo/src/routes/dependencies/page.svelte【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考