更新文档系统归并优化方案

visualization/README.md

@@ -0,0 +1,146 @@
+# K/Y/M三链理论可视化工具
+
+## 概述
+
+本可视化工具为"权力符号考古学"理论提供交互式探索界面，通过动态图表和实时分析帮助用户深入理解K/Y/M三链理论的核心概念和应用。
+
+## 功能特性
+
+### 🎯 核心功能
+- **三链权重调节**：实时调整K链（秩序）、Y链（道德）、M链（信仰）的权重比例
+- **文明类型选择**：预设多种历史文明的三链配置模式
+- **多维度可视化**：提供四种不同类型的图表展示
+
+### 📊 可视化图表
+1. **三链功能关系图**：三角形图表展示三链平衡关系
+2. **三链权重雷达图**：雷达图展示各维度权重分布
+3. **文明发展时间线**：时间轴展示不同文明的三链演变
+4. **符号关联网络**：力导向图展示符号间的关联关系
+
+### 🔍 诊断分析
+- 实时生成文明健康度诊断
+- 三链功能平衡性评估
+- 历史文明对比分析
+
+## 快速开始
+
+### 方法一：直接打开HTML文件
+```bash
+# 在浏览器中直接打开
+open visualization/kym_interactive.html
+# 或双击文件图标
+```
+
+### 方法二：使用Python本地服务器
+```bash
+# 进入可视化目录
+cd /home/ben/code/huhan3000/visualization
+
+# 启动本地服务器
+python -m http.server 8000
+
+# 在浏览器中访问
+# http://localhost:8000/kym_interactive.html
+```
+
+### 方法三：集成到现有项目
+如果项目中已有HTTP服务器，直接将HTML文件部署到静态资源目录即可。
+
+## 使用指南
+
+### 基本操作
+1. **权重调节**：使用滑块调整三链权重，观察图表实时变化
+2. **文明选择**：点击文明按钮加载预设配置
+3. **图表交互**：鼠标悬停查看详细信息，部分图表支持缩放
+
+### 预设文明模式
+- **商朝**：K链主导（秩序建立）
+- **周朝**：Y链主导（道德实践）  
+- **玛雅**：M链主导（信仰体系）
+- **印加**：Y链特色（山地道德）
+- **罗马**：K链过度（秩序复杂化）
+- **均衡发展**：三链平衡（理想模式）
+
+### 诊断解读
+- **绿色状态**：三链均衡，文明韧性良好
+- **黄色警告**：存在一定失衡，需要注意调整
+- **红色警报**：严重失衡，文明面临挑战
+
+## 技术架构
+
+### 前端技术栈
+- **HTML5/CSS3**：响应式界面设计
+- **JavaScript**：交互逻辑实现
+- **D3.js**：数据可视化核心库
+- **Plotly.js**：高级图表库
+
+### 数据模型
+```javascript
+// 三链数据结构
+{
+  k: 0.33, // K链权重（秩序）
+  y: 0.33, // Y链权重（道德）
+  m: 0.34, // M链权重（信仰）
+  name: "文明名称",
+  desc: "文明描述"
+}
+```
+
+## 扩展开发
+
+### 添加新文明
+在`chainData`对象中添加新的文明配置：
+
+```javascript
+const chainData = {
+  // 现有配置...
+  newCivilization: {
+    k: 0.4,
+    y: 0.3, 
+    m: 0.3,
+    name: "新文明",
+    desc: "文明描述"
+  }
+};
+```
+
+### 自定义诊断逻辑
+修改`generateDiagnosis`函数实现自定义分析逻辑。
+
+### 添加新图表类型
+参考现有图表实现，在`updateCharts`函数中添加新的图表更新逻辑。
+
+## 相关文件
+
+- `kym_interactive.html` - 主可视化界面
+- `kym_chain_visualizer.py` - Python版可视化工具
+- `../KYM三链理论与符号传承整合.md` - 理论文档
+- `../理论应用案例库.md` - 应用案例
+
+## 理论背景
+
+本工具基于"权力符号考古学"理论，该理论提出：
+
+- **K链（秩序）**：宇宙的"主程序"，负责空间秩序建立
+- **Y链（道德）**："执行者"，负责道德和物理操作  
+- **M链（信仰）**："信仰"，负责时间预测和救赎
+
+通过三链的平衡与失衡分析，可以诊断文明的健康度和发展方向。
+
+## 贡献指南
+
+欢迎提交改进建议和新功能开发：
+1. Fork项目仓库
+2. 创建功能分支
+3. 提交更改
+4. 发起Pull Request
+
+## 许可证
+
+本项目采用MIT许可证，详见LICENSE文件。
+
+---
+
+**开发团队**：胡汉三千年项目组  
+**最后更新**：2024年  
+**版本**：v1.0

visualization/kym_chain_visualizer.py

@@ -0,0 +1,270 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+K/Y/M三链理论可视化工具
+基于权力符号考古学理论，可视化展示三链功能关系和文明发展轨迹
+"""
+
+import matplotlib.pyplot as plt
+import numpy as np
+from matplotlib.patches import Circle, Wedge, Polygon
+from matplotlib.collections import PatchCollection
+import matplotlib.patches as mpatches
+
+class KYMChainVisualizer:
+    """K/Y/M三链理论可视化类"""
+    
+    def __init__(self):
+        self.fig = None
+        self.ax = None
+        
+        # 三链颜色定义
+        self.chain_colors = {
+            'K': '#1f77b4',  # 蓝色 - 秩序
+            'Y': '#2ca02c',  # 绿色 - 道德  
+            'M': '#d62728'   # 红色 - 信仰
+        }
+        
+        # 三链功能描述
+        self.chain_descriptions = {
+            'K': {'name': 'K链（秩序）', 'function': '宇宙的"主程序"，负责空间秩序'},
+            'Y': {'name': 'Y链（道德）', 'function': '"执行者"，负责道德和物理操作'},
+            'M': {'name': 'M链（信仰）', 'function': '"信仰"，负责时间预测和救赎'}
+        }
+        
+    def create_functional_triangle(self, k_weight, y_weight, m_weight, title="三链功能关系图"):
+        """创建三链功能三角形图"""
+        
+        self.fig, self.ax = plt.subplots(1, 1, figsize=(10, 8))
+        
+        # 创建等边三角形
+        triangle_vertices = np.array([
+            [0, 0],           # K顶点（左下）
+            [1, 0],           # Y顶点（右下）
+            [0.5, np.sqrt(3)/2]  # M顶点（顶部）
+        ])
+        
+        # 绘制三角形边框
+        triangle = Polygon(triangle_vertices, closed=True, 
+                         fill=False, edgecolor='black', linewidth=2)
+        self.ax.add_patch(triangle)
+        
+        # 计算重心坐标（功能平衡点）
+        total_weight = k_weight + y_weight + m_weight
+        k_norm = k_weight / total_weight
+        y_norm = y_weight / total_weight
+        m_norm = m_weight / total_weight
+        
+        # 计算功能点在三角形内的坐标
+        x = k_norm * triangle_vertices[0][0] + y_norm * triangle_vertices[1][0] + m_norm * triangle_vertices[2][0]
+        y = k_norm * triangle_vertices[0][1] + y_norm * triangle_vertices[1][1] + m_norm * triangle_vertices[2][1]
+        
+        # 绘制功能点
+        self.ax.scatter(x, y, s=200, c='gold', edgecolors='black', linewidth=2, zorder=5)
+        
+        # 绘制到各顶点的连线
+        for i, (vertex, color, weight) in enumerate(zip(triangle_vertices, 
+                                                       [self.chain_colors['K'], self.chain_colors['Y'], self.chain_colors['M']],
+                                                       [k_weight, y_weight, m_weight])):
+            self.ax.plot([x, vertex[0]], [y, vertex[1]], 
+                       color=color, linewidth=weight*2, alpha=0.7)
+        
+        # 添加顶点标签
+        self.ax.text(triangle_vertices[0][0]-0.1, triangle_vertices[0][1]-0.1, 
+                    'K链\n秩序', ha='right', va='top', 
+                    bbox=dict(boxstyle="round,pad=0.3", facecolor=self.chain_colors['K'], alpha=0.8))
+        
+        self.ax.text(triangle_vertices[1][0]+0.1, triangle_vertices[1][1]-0.1, 
+                    'Y链\n道德', ha='left', va='top',
+                    bbox=dict(boxstyle="round,pad=0.3", facecolor=self.chain_colors['Y'], alpha=0.8))
+        
+        self.ax.text(triangle_vertices[2][0], triangle_vertices[2][1]+0.1, 
+                    'M链\n信仰', ha='center', va='bottom',
+                    bbox=dict(boxstyle="round,pad=0.3", facecolor=self.chain_colors['M'], alpha=0.8))
+        
+        # 添加功能点标签
+        self.ax.text(x, y-0.05, f'功能平衡点\nK:{k_weight} Y:{y_weight} M:{m_weight}', 
+                    ha='center', va='top', fontsize=10,
+                    bbox=dict(boxstyle="round,pad=0.3", facecolor='lightgray'))
+        
+        # 设置图形属性
+        self.ax.set_xlim(-0.2, 1.2)
+        self.ax.set_ylim(-0.2, 1.2)
+        self.ax.set_aspect('equal')
+        self.ax.axis('off')
+        self.ax.set_title(title, fontsize=16, fontweight='bold', pad=20)
+        
+        return self.fig, self.ax
+    
+    def create_civilization_timeline(self, civilizations_data):
+        """创建文明发展时间线图"""
+        
+        fig, ax = plt.subplots(1, 1, figsize=(15, 8))
+        
+        # 设置时间轴
+        time_range = (-3000, 2000)  # 从公元前3000年到公元2000年
+        ax.set_xlim(time_range)
+        
+        # 创建文明轨迹
+        y_positions = {}
+        current_y = 0
+        
+        for civ in civilizations_data:
+            # 为每个文明分配y轴位置
+            if civ['name'] not in y_positions:
+                y_positions[civ['name']] = current_y
+                current_y += 1
+            
+            y_pos = y_positions[civ['name']]
+            
+            # 绘制文明时间段
+            start_time = civ['start']
+            end_time = civ['end']
+            
+            # 计算三链权重
+            k_weight = civ.get('k_weight', 0.33)
+            y_weight = civ.get('y_weight', 0.33)
+            m_weight = civ.get('m_weight', 0.34)
+            
+            # 创建颜色渐变（基于三链权重）
+            color = np.array([
+                self.chain_colors['K'][0] * k_weight,
+                self.chain_colors['Y'][1] * y_weight, 
+                self.chain_colors['M'][2] * m_weight
+            ])
+            
+            # 绘制时间段
+            ax.plot([start_time, end_time], [y_pos, y_pos], 
+                   color=color, linewidth=8, alpha=0.8)
+            
+            # 添加文明标签
+            ax.text(start_time, y_pos + 0.1, civ['name'], 
+                   fontsize=10, ha='left', va='bottom')
+            
+            # 添加三链权重标签
+            ax.text((start_time + end_time)/2, y_pos - 0.1, 
+                   f'K:{k_weight:.2f} Y:{y_weight:.2f} M:{m_weight:.2f}',
+                   fontsize=8, ha='center', va='top')
+        
+        # 设置图形属性
+        ax.set_xlabel('时间（公元前/公元）', fontsize=12)
+        ax.set_ylabel('文明', fontsize=12)
+        ax.set_title('文明发展时间线与三链权重变化', fontsize=16, fontweight='bold')
+        
+        # 添加图例
+        legend_elements = [
+            mpatches.Patch(color=self.chain_colors['K'], label='K链（秩序）'),
+            mpatches.Patch(color=self.chain_colors['Y'], label='Y链（道德）'),
+            mpatches.Patch(color=self.chain_colors['M'], label='M链（信仰）')
+        ]
+        ax.legend(handles=legend_elements, loc='upper right')
+        
+        # 添加时间网格
+        ax.grid(True, alpha=0.3)
+        
+        return fig, ax
+    
+    def create_chain_network(self, nodes, edges):
+        """创建三链关联网络图"""
+        
+        fig, ax = plt.subplots(1, 1, figsize=(12, 10))
+        
+        # 设置节点位置（圆形布局）
+        angles = np.linspace(0, 2*np.pi, len(nodes), endpoint=False)
+        radius = 5
+        
+        node_positions = {}
+        for i, node in enumerate(nodes):
+            x = radius * np.cos(angles[i])
+            y = radius * np.sin(angles[i])
+            node_positions[node] = (x, y)
+        
+        # 绘制边
+        for edge in edges:
+            source, target, weight, chain_type = edge
+            x1, y1 = node_positions[source]
+            x2, y2 = node_positions[target]
+            
+            # 根据链类型设置颜色
+            color = self.chain_colors.get(chain_type, 'gray')
+            
+            # 绘制边
+            ax.plot([x1, x2], [y1, y2], color=color, 
+                   linewidth=weight*3, alpha=0.7)
+        
+        # 绘制节点
+        for node, (x, y) in node_positions.items():
+            # 根据节点类型设置颜色
+            if 'K' in node:
+                color = self.chain_colors['K']
+            elif 'Y' in node:
+                color = self.chain_colors['Y']
+            elif 'M' in node:
+                color = self.chain_colors['M']
+            else:
+                color = 'lightgray'
+            
+            # 绘制节点
+            ax.scatter(x, y, s=300, c=color, edgecolors='black', 
+                      linewidth=2, alpha=0.8)
+            
+            # 添加节点标签
+            ax.text(x, y, node, ha='center', va='center', 
+                   fontsize=9, fontweight='bold')
+        
+        # 设置图形属性
+        ax.set_xlim(-radius-1, radius+1)
+        ax.set_ylim(-radius-1, radius+1)
+        ax.set_aspect('equal')
+        ax.axis('off')
+        ax.set_title('三链符号关联网络', fontsize=16, fontweight='bold')
+        
+        return fig, ax
+
+def demo_visualizations():
+    """演示可视化功能"""
+    
+    visualizer = KYMChainVisualizer()
+    
+    # 演示1：三链功能关系图
+    print("=== 演示1：三链功能关系图 ===")
+    fig1, ax1 = visualizer.create_functional_triangle(
+        k_weight=0.4, y_weight=0.3, m_weight=0.3,
+        title="商朝晚期三链功能关系（K链过度）"
+    )
+    plt.show()
+    
+    # 演示2：文明发展时间线
+    print("=== 演示2：文明发展时间线 ===")
+    civilizations = [
+        {'name': '商朝', 'start': -1600, 'end': -1046, 'k_weight': 0.6, 'y_weight': 0.2, 'm_weight': 0.2},
+        {'name': '周朝', 'start': -1046, 'end': -256, 'k_weight': 0.3, 'y_weight': 0.5, 'm_weight': 0.2},
+        {'name': '罗马帝国', 'start': -27, 'end': 476, 'k_weight': 0.5, 'y_weight': 0.3, 'm_weight': 0.2},
+        {'name': '玛雅文明', 'start': 200, 'end': 900, 'k_weight': 0.2, 'y_weight': 0.3, 'm_weight': 0.5},
+        {'name': '印加帝国', 'start': 1200, 'end': 1533, 'k_weight': 0.3, 'y_weight': 0.5, 'm_weight': 0.2}
+    ]
+    
+    fig2, ax2 = visualizer.create_civilization_timeline(civilizations)
+    plt.show()
+    
+    # 演示3：三链关联网络
+    print("=== 演示3：三链关联网络 ===")
+    nodes = ['昆仑(K)', 'Kósmos(K)', '大禹(Y)', '印加(Y)', '摩西(M)', '玛雅(M)', '秩序', '道德', '信仰']
+    
+    edges = [
+        ('昆仑(K)', '秩序', 0.8, 'K'),
+        ('Kósmos(K)', '秩序', 0.7, 'K'),
+        ('大禹(Y)', '道德', 0.9, 'Y'),
+        ('印加(Y)', '道德', 0.8, 'Y'),
+        ('摩西(M)', '信仰', 0.9, 'M'),
+        ('玛雅(M)', '信仰', 0.8, 'M'),
+        ('秩序', '道德', 0.6, 'K'),
+        ('道德', '信仰', 0.5, 'Y'),
+        ('信仰', '秩序', 0.4, 'M')
+    ]
+    
+    fig3, ax3 = visualizer.create_chain_network(nodes, edges)
+    plt.show()
+
+if __name__ == "__main__":
+    demo_visualizations()

visualization/kym_interactive.html

@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>K/Y/M三链理论交互式可视化</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #333;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        
+        .header h1 {
+            color: #2c3e50;
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        }
+        
+        .header .subtitle {
+            color: #7f8c8d;
+            font-size: 1.2em;
+            margin-bottom: 20px;
+        }
+        
+        .controls {
+            background: #ecf0f1;
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 30px;
+        }
+        
+        .slider-container {
+            margin: 15px 0;
+        }
+        
+        .slider-label {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 5px;
+        }
+        
+        .slider {
+            width: 100%;
+            height: 8px;
+            border-radius: 4px;
+            outline: none;
+        }
+        
+        .k-slider { background: linear-gradient(to right, #1f77b4, #aec7e8); }
+        .y-slider { background: linear-gradient(to right, #2ca02c, #98df8a); }
+        .m-slider { background: linear-gradient(to right, #d62728, #ff9896); }
+        
+        .visualization-area {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        
+        .chart-container {
+            background: white;
+            border-radius: 10px;
+            padding: 15px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .chart-title {
+            text-align: center;
+            font-weight: bold;
+            margin-bottom: 10px;
+            color: #2c3e50;
+        }
+        
+        .info-panel {
+            background: #34495e;
+            color: white;
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 20px;
+        }
+        
+        .chain-info {
+            display: flex;
+            justify-content: space-around;
+            text-align: center;
+            margin: 20px 0;
+        }
+        
+        .chain-card {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 15px;
+            border-radius: 8px;
+            width: 30%;
+        }
+        
+        .chain-card.k { border-left: 4px solid #1f77b4; }
+        .chain-card.y { border-left: 4px solid #2ca02c; }
+        .chain-card.m { border-left: 4px solid #d62728; }
+        
+        .civilization-selector {
+            display: flex;
+            gap: 10px;
+            margin: 15px 0;
+            flex-wrap: wrap;
+        }
+        
+        .civilization-btn {
+            padding: 8px 15px;
+            border: none;
+            border-radius: 20px;
+            background: #bdc3c7;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .civilization-btn.active {
+            background: #3498db;
+            color: white;
+        }
+        
+        .civilization-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>👑 K/Y/M三链理论可视化平台</h1>
+            <div class="subtitle">权力符号考古学的交互式探索工具</div>
+        </div>
+        
+        <div class="controls">
+            <h3>三链权重调节</h3>
+            
+            <div class="slider-container">
+                <div class="slider-label">
+                    <span>K链（秩序）权重: <span id="k-value">0.33</span></span>
+                    <span style="color: #1f77b4;">宇宙的"主程序"，负责空间秩序</span>
+                </div>
+                <input type="range" min="0" max="100" value="33" class="slider k-slider" id="k-slider">
+            </div>
+            
+            <div class="slider-container">
+                <div class="slider-label">
+                    <span>Y链（道德）权重: <span id="y-value">0.33</span></span>
+                    <span style="color: #2ca02c;">"执行者"，负责道德和物理操作</span>
+                </div>
+                <input type="range" min="0" max="100" value="33" class="slider y-slider" id="y-slider">
+            </div>
+            
+            <div class="slider-container">
+                <div class="slider-label">
+                    <span>M链（信仰）权重: <span id="m-value">0.34</span></span>
+                    <span style="color: #d62728;">"信仰"，负责时间预测和救赎</span>
+                </div>
+                <input type="range" min="0" max="100" value="34" class="slider m-slider" id="m-slider">
+            </div>
+            
+            <div class="civilization-selector">
+                <button class="civilization-btn active" data-civ="shang">商朝（K链主导）</button>
+                <button class="civilization-btn" data-civ="zhou">周朝（Y链主导）</button>
+                <button class="civilization-btn" data-civ="maya">玛雅（M链主导）</button>
+                <button class="civilization-btn" data-civ="inca">印加（Y链特色）</button>
+                <button class="civilization-btn" data-civ="rome">罗马（K链过度）</button>
+                <button class="civilization-btn" data-civ="balanced">均衡发展</button>
+            </div>
+        </div>
+        
+        <div class="visualization-area">
+            <div class="chart-container">
+                <div class="chart-title">三链功能关系图</div>
+                <div id="triangle-chart"></div>
+            </div>
+            
+            <div class="chart-container">
+                <div class="chart-title">三链权重雷达图</div>
+                <div id="radar-chart"></div>
+            </div>
+            
+            <div class="chart-container">
+                <div class="chart-title">文明发展轨迹</div>
+                <div id="timeline-chart"></div>
+            </div>
+            
+            <div class="chart-container">
+                <div class="chart-title">符号关联网络</div>
+                <div id="network-chart"></div>
+            </div>
+        </div>
+        
+        <div class="info-panel">
+            <h3>当前文明诊断</h3>
+            <div id="diagnosis-text">选择或调整文明类型查看详细分析...</div>
+            
+            <div class="chain-info">
+                <div class="chain-card k">
+                    <h4>K链分析</h4>
+                    <div id="k-analysis">秩序建立程度：中等</div>
+                </div>
+                <div class="chain-card y">
+                    <h4>Y链分析</h4>
+                    <div id="y-analysis">道德实践水平：中等</div>
+                </div>
+                <div class="chain-card m">
+                    <h4>M链分析</h4>
+                    <div id="m-analysis">信仰体系强度：中等</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 三链数据定义
+        const chainData = {
+            shang: { k: 0.6, y: 0.2, m: 0.2, name: "商朝", desc: "K链过度主导，秩序建立但道德实践不足" },
+            zhou: { k: 0.3, y: 0.5, m: 0.2, name: "周朝", desc: "Y链道德实践主导，建立德治体系" },
+            maya: { k: 0.2, y: 0.3, m: 0.5, name: "玛雅", desc: "M链信仰体系主导，时间测算极致化" },
+            inca: { k: 0.3, y: 0.5, m: 0.2, name: "印加", desc: "Y链山地道德特色，实践智慧突出" },
+            rome: { k: 0.5, y: 0.3, m: 0.2, name: "罗马", desc: "K链秩序过度复杂化，系统脆弱性增加" },
+            balanced: { k: 0.33, y: 0.33, m: 0.34, name: "均衡发展", desc: "三链功能均衡，文明韧性最强" }
+        };
+
+        // 当前选中的文明
+        let currentCivilization = 'balanced';
+
+        // 初始化图表
+        function initCharts() {
+            updateCharts();
+            
+            // 绑定滑块事件
+            document.getElementById('k-slider').addEventListener('input', updateFromSliders);
+            document.getElementById('y-slider').addEventListener('input', updateFromSliders);
+            document.getElementById('m-slider').addEventListener('input', updateFromSliders);
+            
+            // 绑定文明选择按钮
+            document.querySelectorAll('.civilization-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    document.querySelectorAll('.civilization-btn').forEach(b => b.classList.remove('active'));
+                    this.classList.add('active');
+                    currentCivilization = this.dataset.civ;
+                    loadCivilizationData(currentCivilization);
+                });
+            });
+        }
+
+        // 从滑块更新数据
+        function updateFromSliders() {
+            const kVal = parseInt(document.getElementById('k-slider').value) / 100;
+            const yVal = parseInt(document.getElementById('y-slider').value) / 100;
+            const mVal = parseInt(document.getElementById('m-slider').value) / 100;
+            
+            document.getElementById('k-value').textContent = kVal.toFixed(2);
+            document.getElementById('y-value').textContent = yVal.toFixed(2);
+            document.getElementById('m-value').textContent = mVal.toFixed(2);
+            
+            updateCharts(kVal, yVal, mVal);
+            updateDiagnosis(kVal, yVal, mVal);
+        }
+
+        // 加载文明数据
+        function loadCivilizationData(civ) {
+            const data = chainData[civ];
+            document.getElementById('k-slider').value = data.k * 100;
+            document.getElementById('y-slider').value = data.y * 100;
+            document.getElementById('m-slider').value = data.m * 100;
+            
+            updateFromSliders();
+        }
+
+        // 更新所有图表
+        function updateCharts(k = 0.33, y = 0.33, m = 0.34) {
+            updateTriangleChart(k, y, m);
+            updateRadarChart(k, y, m);
+            updateTimelineChart();
+            updateNetworkChart();
+        }
+
+        // 更新三角形图表
+        function updateTriangleChart(k, y, m) {
+            const data = [{
+                type: 'scatterternary',
+                mode: 'markers',
+                a: [k * 100],
+                b: [y * 100],
+                c: [m * 100],
+                marker: {
+                    size: 20,
+                    color: 'gold',
+                    line: { width: 2, color: 'black' }
+                },
+                text: [`K:${k.toFixed(2)} Y:${y.toFixed(2)} M:${m.toFixed(2)}`],
+                hoverinfo: 'text'
+            }];
+
+            const layout = {
+                ternary: {
+                    sum: 100,
+                    aaxis: { title: 'K链（秩序）', color: '#1f77b4' },
+                    baxis: { title: 'Y链（道德）', color: '#2ca02c' },
+                    caxis: { title: 'M链（信仰）', color: '#d62728' }
+                },
+                title: '三链功能平衡图',
+                showlegend: false
+            };
+
+            Plotly.newPlot('triangle-chart', data, layout);
+        }
+
+        // 更新雷达图
+        function updateRadarChart(k, y, m) {
+            const data = [{
+                type: 'scatterpolar',
+                r: [k, y, m, k],
+                theta: ['秩序建立', '道德实践', '信仰体系', '秩序建立'],
+                fill: 'toself',
+                line: { color: '#3498db' },
+                fillcolor: 'rgba(52, 152, 219, 0.3)'
+            }];
+
+            const layout = {
+                polar: {
+                    radialaxis: {
+                        visible: true,
+                        range: [0, 1]
+                    }
+                },
+                showlegend: false
+            };
+
+            Plotly.newPlot('radar-chart', data, layout);
+        }
+
+        // 更新时间线图表
+        function updateTimelineChart() {
+            // 简化的时间线数据
+            const data = [
+                { civilization: '商朝', start: -1600, end: -1046, k: 0.6, y: 0.2, m: 0.2 },
+                { civilization: '周朝', start: -1046, end: -256, k: 0.3, y: 0.5, m: 0.2 },
+                { civilization: '罗马', start: -27, end: 476, k: 0.5, y: 0.3, m: 0.2 },
+                { civilization: '玛雅', start: 200, end: 900, k: 0.2, y: 0.3, m: 0.5 },
+                { civilization: '印加', start: 1200, end: 1533, k: 0.3, y: 0.5, m: 0.2 }
+            ];
+
+            const traces = data.map(civ => ({
+                x: [civ.start, civ.end],
+                y: [civ.civilization, civ.civilization],
+                mode: 'lines',
+                line: {
+                    color: `rgb(${Math.round(civ.k * 255)}, ${Math.round(civ.y * 255)}, ${Math.round(civ.m * 255)})`,
+                    width: 8
+                },
+                name: civ.civilization,
+                hoverinfo: 'text',
+                text: `${civ.civilization}<br>K:${civ.k} Y:${civ.y} M:${civ.m}`
+            }));
+
+            const layout = {
+                title: '文明发展时间线',
+                xaxis: { title: '时间（公元前/公元）' },
+                yaxis: { title: '文明' },
+                showlegend: false
+            };
+
+            Plotly.newPlot('timeline-chart', traces, layout);
+        }
+
+        // 更新网络图表
+        function updateNetworkChart() {
+            // 简化的网络数据
+            const nodes = [
+                { id: '昆仑', group: 'K', x: 0, y: 0 },
+                { id: '大禹', group: 'Y', x: 1, y: 0 },
+                { id: '玛雅', group: 'M', x: 0.5, y: 1 },
+                { id: '秩序', group: 'K', x: -1, y: 0 },
+                { id: '道德', group: 'Y', x: 2, y: 0 },
+                { id: '信仰', group: 'M', x: 0.5, y: 2 }
+            ];
+
+            const links = [
+                { source: '昆仑', target: '秩序', value: 0.8 },
+                { source: '大禹', target: '道德', value: 0.9 },
+                { source: '玛雅', target: '信仰', value: 0.8 },
+                { source: '秩序', target: '道德', value: 0.6 },
+                { source: '道德', target: '信仰', value: 0.5 }
+            ];
+
+            // 使用D3.js创建力导向图
+            const svg = d3.select('#network-chart').html('').append('svg')
+                .attr('width', 400)
+                .attr('height', 300);
+
+            // 简化的力导向图实现
+            const simulation = d3.forceSimulation(nodes)
+                .force('link', d3.forceLink(links).id(d => d.id).distance(100))
+                .force('charge', d3.forceManyBody().strength(-300))
+                .force('center', d3.forceCenter(200, 150));
+
+            const link = svg.append('g')
+                .selectAll('line')
+                .data(links)
+                .enter().append('line')
+                .attr('stroke-width', d => d.value * 5)
+                .attr('stroke', '#999');
+
+            const node = svg.append('g')
+                .selectAll('circle')
+                .data(nodes)
+                .enter().append('circle')
+                .attr('r', 10)
+                .attr('fill', d => {
+                    if (d.group === 'K') return '#1f77b4';
+                    if (d.group === 'Y') return '#2ca02c';
+                    return '#d62728';
+                });
+
+            simulation.on('tick', () => {
+                link
+                    .attr('x1', d => d.source.x)
+                    .attr('y1', d => d.source.y)
+                    .attr('x2', d => d.target.x)
+                    .attr('y2', d => d.target.y);
+
+                node
+                    .attr('cx', d => d.x)
+                    .attr('cy', d => d.y);
+            });
+        }
+
+        // 更新诊断分析
+        function updateDiagnosis(k, y, m) {
+            const diagnosis = generateDiagnosis(k, y, m);
+            document.getElementById('diagnosis-text').innerHTML = diagnosis.overall;
+            document.getElementById('k-analysis').textContent = diagnosis.k;
+            document.getElementById('y-analysis').textContent = diagnosis.y;
+            document.getElementById('m-analysis').textContent = diagnosis.m;
+        }
+
+        // 生成诊断分析
+        function generateDiagnosis(k, y, m) {
+            let overall = "";
+            let kAnalysis = "";
+            let yAnalysis = "";
+            let mAnalysis = "";
+
+            // K链分析
+            if (k > 0.5) {
+                kAnalysis = "秩序建立过度，可能导致系统僵化";
+            } else if (k > 0.3) {
+                kAnalysis = "秩序建立良好，系统稳定性强";
+            } else {
+                kAnalysis = "秩序建立不足，需要加强";
+            }
+
+            // Y链分析
+            if (y > 0.5) {
+                yAnalysis = "道德实践突出，社会凝聚力强";
+            } else if (y > 0.3) {
+                yAnalysis = "道德实践适中，社会运行平稳";
+            } else {
+                yAnalysis = "道德实践不足，需要重视";
+            }
+
+            // M链分析
+            if (m > 0.5) {
+                mAnalysis = "信仰体系强大，但可能过度依赖";
+            } else if (m > 0.3) {
+                mAnalysis = "信仰体系适中，精神需求满足";
+            } else {
+                mAnalysis = "信仰体系薄弱，精神建设需加强";
+            }
+
+            // 总体诊断
+            const imbalance = Math.max(k, y, m) - Math.min(k, y, m);
+            if (imbalance > 0.3) {
+                overall = "⚠️ 三链功能严重失衡，文明韧性面临挑战";
+            } else if (imbalance > 0.15) {
+                overall = "⚠️ 三链功能存在一定失衡，需要注意调整";
+            } else {
+                overall = "✅ 三链功能均衡发展，文明韧性良好";
+            }
+
+            overall += `<br>当前权重：K链 ${k.toFixed(2)} | Y链 ${y.toFixed(2)} | M链 ${m.toFixed(2)}`;
+
+            return { overall, k: kAnalysis, y: yAnalysis, m: mAnalysis };
+        }
+
+        // 页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', initCharts);
+    </script>
+</body>
+</html>