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?？偨YSvelteGanttDependencies是 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），僅供參考