以下是一個單一完整的 HTML 文件，包含使用 vis.js 視覺化上述數學知識圖譜的程式碼。該圖譜展示了節點（數學概念）和邊（概念間的關係），並確保知識結構清晰且可交互。HTML 文件內嵌了 vis.js 庫（使用 CDN）、節點和邊的數據，以及初始化網絡的 JavaScript 程式碼。
```html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>數學知識圖譜</title>
<!-- 引入 vis.js 庫 -->
<script src="https://unpkg.com/vis-network@9.1.9/dist/vis-network.min.js"></script>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
#network {
width: 100vw;
height: 100vh;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!-- 網絡容器 -->
<div id="network"></div>
<script>
// 定義節點
const nodes = new vis.DataSet([
{ id: 1, label: "實數系統" },
{ id: 2, label: "算術運算" },
{ id: 3, label: "比例與比率" },
{ id: 4, label: "線性方程" },
{ id: 5, label: "代數基礎" },
{ id: 6, label: "多項式" },
{ id: 7, label: "二次方程" },
{ id: 8, label: "函數概念" },
{ id: 9, label: "幾何基礎" },
{ id: 10, label: "三角形性質" },
{ id: 11, label: "相似形" },
{ id: 12, label: "幾何證明" },
{ id: 13, label: "統計學基礎" },
{ id: 14, label: "資料分析" },
{ id: 15, label: "概率基礎" },
{ id: 16, label: "數據可視化" }
]);
// 定義邊
const edges = new vis.DataSet([
{ from: 1, to: 2, arrows: "to", title: "包含算術運算" },
{ from: 1, to: 3, arrows: "to", title: "引導比例概念" },
{ from: 1, to: 4, arrows: "to", title: "應用於線性方程" },
{ from: 2, to: 4, arrows: "to", title: "運算求解線性方程" },
{ from: 3, to: 4, arrows: "to", title: "比例求解線性方程" },
{ from: 5, to: 6, arrows: "to", title: "延伸至多項式" },
{ from: 5, to: 7, arrows: "to", title: "包含二次方程" },
{ from: 5, to: 8, arrows: "to", title: "引導函數概念" },
{ from: 6, to: 8, arrows: "to", title: "多項式函數表示" },
{ from: 7, to: 8, arrows: "to", title: "二次函數應用" },
{ from: 9, to: 10, arrows: "to", title: "包含三角形性質" },
{ from: 9, to: 11, arrows: "to", title: "包含相似形" },
{ from: 9, to: 12, arrows: "to", title: "應用於幾何證明" },
{ from: 10, to: 11, arrows: "to", title: "三角形與相似形關聯" },
{ from: 10, to: 12, arrows: "to", title: "三角形性質證明" },
{ from: 11, to: 12, arrows: "to", title: "相似形證明應用" },
{ from: 13, to: 14, arrows: "to", title: "包含資料分析" },
{ from: 13, to: 16, arrows: "to", title: "引導數據可視化" },
{ from: 14, to: 16, arrows: "to", title: "分析結果可視化" },
{ from: 15, to: 16, arrows: "to", title: "概率數據可視化" },
{ from: 1, to: 5, arrows: "to", title: "實數應用於代數", dashes: true },
{ from: 3, to: 8, arrows: "to", title: "比例應用於函數", dashes: true },
{ from: 7, to: 11, arrows: "to", title: "二次方程應用於相似形", dashes: true },
{ from: 8, to: 16, arrows: "to", title: "函數圖形可視化", dashes: true },
{ from: 10, to: 3, arrows: "to", title: "三角形比例應用", dashes: true },
{ from: 14, to: 4, arrows: "to", title: "統計應用於線性模型", dashes: true }
]);
// 初始化網絡
const container = document.getElementById("network");
const data = { nodes: nodes, edges: edges };
const options = {
edges: {
font: { align: "middle" },
smooth: true,
arrows: { to: { enabled: true, scaleFactor: 0.5 } }
},
nodes: {
shape: "box",
font: { size: 16 },
color: { background: "#e6f3ff", border: "#0066cc" }
},
physics: {
stabilization: true,
barnesHut: { gravitationalConstant: -2000, springLength: 150 }
},
interaction: {
hover: true,
zoomView: true,
dragView: true
}
};
const network = new vis.Network(container, data, options);
</script>
</body>
</html>
```
### 說明
1. **HTML 結構**：
- 使用 `<div id="network">` 作為 vis.js 網絡的容器。
- 通過 CDN 引入 vis.js 庫（版本 9.1.9），確保無需額外下載。
2. **CSS 樣式**：
- 設置網絡容器佔據整個視窗（`100vw` 和 `100vh`）。
- 簡單的邊框和字體設置，確保視覺清晰。
3. **節點和邊**：
- 節點定義了 16 個數學概念，從實數系統到數據可視化。
- 邊定義了概念間的關係，實線表示直接遞進，虛線（`dashes: true`）表示跨領域應用。
- 每個邊的 `title` 屬性提供具體的語義標籤，懸停時可顯示。
4. **網絡選項**：
- `edges`：設置邊的箭頭大小和標籤對齊方式。
- `nodes`：使用矩形框（`box`）表示節點，設置背景色和邊框色。
- `physics`：調整引力常數和彈簧長度，優化節點分佈。
- `interaction`：啟用懸停、縮放和拖動功能，增強交互性。
5. **功能**：
- 打開此 HTML 文件後，瀏覽器將顯示一個可交互的知識圖譜。
- 用戶可以拖動節點、縮放視圖，或懸停在邊上查看關係標籤。
- 圖譜清晰展示了數學概念的層次結構和跨領域關聯，適合用於數學 AI 系統的知識表示。
### 使用方法
- 將此程式碼保存為 `math_knowledge_graph.html`。
- 使用現代瀏覽器（Chrome、Firefox 等）直接打開文件，或通過本地伺服器（如 VS Code 的 Live Server 擴展）運行。
- 如果需要調整圖譜佈局或樣式，可以修改 `options` 物件中的參數。
如果需要進一步優化（例如添加搜索功能、動態更新節點等），請告訴我！