Springy.js 節點新增可點擊超連結完整實作：nodeSelected 事件與資料綁定

核心機制：節點資料攜帶 URL + 事件監聽導向

Springy.js 節點建立時可附加任意資料物件，利用 nodeSelected 回呼即可實現點擊跳轉。

完整可執行範例

<!DOCTYPE html>
<html>
<head>
  <script src="jquery.min.js"></script>
  <script src="springy.js"></script>
  <script src="springyui.js"></script>
  <style> #springydemo { width: 800px; height: 600px; } </style>
</head>
<body>
  <div id="springydemo"></div>
  <script>
    var graph = new Springy.Graph();

    // 1. 建立節點時在 data 物件中加入 href 欄位
    var dennis = graph.newNode({ 
      label: 'Dennis', 
      href: 'https://example.com/dennis',
      ondoubleclick: function() { console.log('Double click Dennis'); }
    });
    var michael = graph.newNode({ label: 'Michael', href: 'https://www.w3dev.cn' });
    var jessica = graph.newNode({ label: 'Jessica' }); // 無 href 不跳轉

    // 建立邊 (省略...)
    graph.newEdge(dennis, michael, { color: '#00A0B0' });
    graph.newEdge(michael, jessica, { color: '#CC333F' });

    // 2. 初始化 UI 並綁定 nodeSelected 事件
    jQuery(function() {
      var springy = window.springy = jQuery('#springydemo').springy({
        graph: graph,
        // 關鍵：節點被選中/點擊時觸發
        nodeSelected: function(node) {
          // node.data 即為 newNode 時傳入的物件
          if (node.data && node.data.href) {
            // 新分頁開啟 (或用 location.href 當頁跳轉)
            window.open(node.data.href, '_blank');
          }
        }
      });
    });
  </script>
</body>
</html>

關鍵點解析

1. 資料綁定：newNode({ label: '...', href: '...' }) 中的 href 會自動掛載到 node.data.href。
2. 事件介面：springy({ ..., nodeSelected: fn }) 是官方提供的回呼介面。
3. 防禦性程式：判斷 node.data && node.data.href 避免無連結節點報錯。
4. 開啟方式：window.open(url, '_blank') 新分頁；location.href = url 當頁跳轉。

進階擴充：滑鼠樣式提示

在 springyui.js 繪製節點時，根據 node.data.href 動態設定 Cursor：

// 修改 springyui.js 內部 NodeRenderer.prototype.draw
if (node.data.href) {
  ctx.canvas.style.cursor = 'pointer'; // 懸停變小手
} else {
  ctx.canvas.style.cursor = 'default';
}

官方 Demo 參考

下載 Springy 原始碼包，demo.html 中已包含完整 nodeSelected 使用範例，建議直接參考修改。