513 lines
19 KiB
HTML
513 lines
19 KiB
HTML
<!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> |