Files

beabigegg 2d37d23bcf v9.5: 實作標籤完全不重疊算法

- 新增 _calculate_lane_conflicts_v2() 分開返回標籤重疊和線穿框分數
- 修改泳道選擇算法，優先選擇無標籤重疊的泳道
- 兩階段搜尋：優先側別無可用泳道則嘗試另一側
- 增強日誌輸出，顯示標籤範圍和詳細衝突分數

🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-06 11:35:29 +08:00

9.8 KiB

Raw Blame History

時間軸標籤避碰改進（v7.0） - Shape.path 渲染法

核心轉變

從 Scatter 線條到 Shape 路徑

v6.0 的問題：

⚠️ 使用 scatter (mode='lines') 繪製連接線
⚠️ 線條可能遮擋事件點和文字框
⚠️ Z-index 控制不夠精確
⚠️ hover 事件可能被線條攔截

v7.0 的解決方案 - Shape.path 渲染法：

✅ 使用 shape.path 繪製多段 L 形路徑
✅ 設定 layer='below' 確保線條在底層
✅ opacity=0.7 半透明，不干擾閱讀
✅ 完全避免線條遮擋重要元素

技術實現

Shape Line Segments（分段繪製）

由於 Plotly 的 shape.path 不支持 datetime 座標，改用 type='line' 分段繪製：

# 將每一段連線分別繪製為獨立的 shape
for i in range(len(line_x_points) - 1):
    shapes.append({
        'type': 'line',
        'x0': line_x_points[i],
        'y0': line_y_points[i],
        'x1': line_x_points[i + 1],
        'y1': line_y_points[i + 1],
        'xref': 'x',  # 座標參考系統
        'yref': 'y',
        'line': {
            'color': marker['color'],
            'width': 1.5,
        },
        'layer': 'below',  # 關鍵設定：置於底層
        'opacity': 0.7,    # 半透明效果
    })

範例：

L 形連接（4 點）→ 3 個 line segments
直線連接（2 點）→ 1 個 line segment
迴圈自動處理不同長度

與 v6.0 對比

v6.0（Scatter 方式）：

data.append({
    'type': 'scatter',
    'x': line_x_points,
    'y': line_y_points,
    'mode': 'lines',
    'line': {
        'color': marker['color'],
        'width': 1.5,
    },
    'showlegend': False,
    'hoverinfo': 'skip'
})

v7.0（Shape Line Segments 方式）：

# 分段繪製，支持 datetime 座標
for i in range(len(line_x_points) - 1):
    shapes.append({
        'type': 'line',
        'x0': line_x_points[i],
        'y0': line_y_points[i],
        'x1': line_x_points[i + 1],
        'y1': line_y_points[i + 1],
        'xref': 'x',
        'yref': 'y',
        'line': {
            'color': marker['color'],
            'width': 1.5,
        },
        'layer': 'below',  # 線條置於底層
        'opacity': 0.7,    # 半透明
    })

視覺層級

Z-index 分層（從底到頂）

┌────────────────────────────────┐
│  Layer 4: Annotations (文字框)  │  最頂層，確保可讀
│  Layer 3: Scatter Points (事件點)│  事件點清晰可見
│  Layer 2: Axis Line (時間軸)     │  時間軸明確
│  Layer 1: Shapes (連接線)       │  底層，不遮擋
└────────────────────────────────┘

保證：

🔒 連接線永遠在底層（layer='below'）
🔒 事件點永遠可見可點擊
🔒 文字框永遠清晰可讀
🔒 hover 事件不會被線條攔截

優勢總結

1. 視覺清晰

線條不會遮擋事件點
文字框始終在最上層
半透明效果減少視覺干擾

2. 交互友好

hover 事件正確觸發在事件點和文字框
線條不攔截滑鼠事件
用戶體驗更流暢

3. 技術優雅

使用 Plotly 標準的 shape 系統
明確的 layer 控制
SVG path 語法靈活高效

4. 與 v6.0 完全兼容

保留泳道分配法的所有優點
僅改變渲染方式，不改變邏輯
100% 向後兼容

代碼位置

修改的文件

backend/renderer_timeline.py

水平時間軸（第 372-389 行）

# 使用 shape line 繪製連接線（分段），設定 layer='below' 避免遮擋
for i in range(len(line_x_points) - 1):
    shapes.append({
        'type': 'line',
        'x0': line_x_points[i],
        'y0': line_y_points[i],
        'x1': line_x_points[i + 1],
        'y1': line_y_points[i + 1],
        'xref': 'x',
        'yref': 'y',
        'line': {
            'color': marker['color'],
            'width': 1.5,
        },
        'layer': 'below',  # 線條置於底層
        'opacity': 0.7,    # 半透明
    })

垂直時間軸（第 635-652 行）

相同的實現邏輯（迴圈繪製線段）
適配垂直時間軸的座標系統

測試方法

1. 啟動應用

conda activate timeline_designer
python app.py

2. 訪問界面

瀏覽器：http://localhost:8000
或使用 PyWebview GUI 視窗

3. 測試示範檔案

demo_project_timeline.csv - 15 個事件
demo_life_events.csv - 11 個事件
demo_product_roadmap.csv - 14 個事件

4. 驗證重點

✅ 連接線是否在底層（不遮擋事件點和文字框）
✅ 事件點 hover 是否正常觸發
✅ 文字框是否清晰可見
✅ 線條是否有半透明效果
✅ 視覺是否整潔專業

與其他版本對比

版本	連接線方式	視覺遮擋	hover 問題	複雜度	效果
v5.0	scatter + 碰撞檢測	⚠️ 可能遮擋	⚠️ 可能攔截	高	中等
v6.0	scatter + 泳道分配	⚠️ 可能遮擋	⚠️ 可能攔截	低	良好
v7.0	shape.path + layer='below'	✅ 無遮擋	✅ 無攔截	低	優秀

可調整參數

線條透明度

# renderer_timeline.py 第 382 行和第 639 行
'opacity': 0.7,    # 預設 0.7，可調整為 0.5-1.0

線條寬度

# renderer_timeline.py 第 378 行和第 635 行
'width': 1.5,      # 預設 1.5，可調整為 1.0-3.0

線條樣式

'line': {
    'color': marker['color'],
    'width': 1.5,
    'dash': 'dot',    # 可選：'solid', 'dot', 'dash', 'dashdot'
}

未來可能改進

1. 同日多卡片左右交錯

同一天的卡片交錯使用左/右側邊當錨點
水平段自然平行不打架
需要在標籤定位邏輯中實現

2. 貝茲曲線平滑

使用 SVG 的 C (Cubic Bezier) 命令
更自然的曲線效果
視覺更柔和

# 範例：貝茲曲線路徑
path_str = f"M {x0},{y0} C {cx1},{cy1} {cx2},{cy2} {x1},{y1}"

3. 動態線條顏色

根據事件重要性調整透明度
高優先級事件使用更鮮明的線條
低優先級事件線條更淡

錯誤修復記錄

Bug Fix #2: Shape.path 不支持 datetime 座標

問題描述：

Plotly 的 shape.path 不直接支持 datetime 座標軸
使用 path 命令（M, L）時，datetime 對象無法正確解析
導致連接線完全不顯示

修復方案：改用 type='line' 分段繪製，每一段連線作為獨立的 shape：

# 修復前：使用 path（不支持 datetime）
path_str = f"M {x0},{y0} L {x1},{y1} L {x2},{y2} L {x3},{y3}"
shapes.append({
    'type': 'path',
    'path': path_str,
    ...
})

# 修復後：使用多個 line segment（支持 datetime）
for i in range(len(line_x_points) - 1):
    shapes.append({
        'type': 'line',
        'x0': line_x_points[i],
        'y0': line_y_points[i],
        'x1': line_x_points[i + 1],
        'y1': line_y_points[i + 1],
        'xref': 'x',  # 明確指定座標參考系統
        'yref': 'y',
        'line': {'color': marker['color'], 'width': 1.5},
        'layer': 'below',
        'opacity': 0.7,
    })

技術細節：

L 形連接線需要 3 個線段：垂直 → 水平 → 垂直（或水平 → 垂直 → 水平）
直線連接只需要 1 個線段
使用迴圈自動處理不同長度的點列表

影響範圍：

水平時間軸（renderer_timeline.py 第 372-389 行）
垂直時間軸（renderer_timeline.py 第 635-652 行）

優勢：

✅ 完全支持 datetime 座標
✅ 保持 layer='below' 的優點
✅ 視覺效果與 path 完全相同
✅ 代碼更簡潔（迴圈處理）

Bug Fix #1: 處理直線連接的索引錯誤