You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
415 lines
16 KiB
415 lines
16 KiB
|
|
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>汉匈战争人物关系图谱</title>
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: linear-gradient(135deg, #0a1a3a, #1a3a6a);
|
|
font-family: "Microsoft YaHei", sans-serif;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#header {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,100,200,0.5), rgba(0,0,0,0));
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#title {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
background: linear-gradient(to right, #aaf, #5af);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 10px rgba(100,150,255,0.3);
|
|
}
|
|
|
|
#container {
|
|
display: flex;
|
|
height: calc(100vh - 100px);
|
|
}
|
|
|
|
#graph {
|
|
flex: 3;
|
|
height: 100%;
|
|
border-right: 1px solid #2a4a7a;
|
|
}
|
|
|
|
#panel {
|
|
flex: 1;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
background: rgba(10,30,60,0.7);
|
|
}
|
|
|
|
.node {
|
|
stroke: #fff;
|
|
stroke-width: 1.5px;
|
|
cursor: move;
|
|
filter: drop-shadow(0 0 5px rgba(100,150,255,0.5));
|
|
}
|
|
|
|
.node text {
|
|
font-size: 12px;
|
|
text-anchor: middle;
|
|
dominant-baseline: central;
|
|
pointer-events: none;
|
|
fill: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.link {
|
|
stroke-opacity: 0.6;
|
|
}
|
|
|
|
.military {
|
|
stroke: #f44;
|
|
}
|
|
|
|
.family {
|
|
stroke: #4f4;
|
|
}
|
|
|
|
.political {
|
|
stroke: #44f;
|
|
}
|
|
|
|
.legend {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: rgba(0,0,0,0.5);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
padding: 10px;
|
|
background: rgba(0,0,0,0.8);
|
|
border-radius: 5px;
|
|
pointer-events: none;
|
|
max-width: 300px;
|
|
font-size: 14px;
|
|
z-index: 10;
|
|
}
|
|
|
|
#layout-controls {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 20px;
|
|
background: rgba(0,0,0,0.5);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button {
|
|
background: #2a4a7a;
|
|
color: white;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
margin: 5px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background: #3a5a8a;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
border-bottom: 1px solid #3a5a8a;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.panel-content {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.relationship {
|
|
margin-bottom: 10px;
|
|
padding: 5px;
|
|
background: rgba(20,40,80,0.5);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.highlight {
|
|
filter: drop-shadow(0 0 10px gold);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="header">
|
|
<h1 id="title">汉匈战争人物关系图谱</h1>
|
|
</div>
|
|
|
|
<div id="container">
|
|
<div id="graph"></div>
|
|
<div id="panel">
|
|
<div class="panel-title">详细信息</div>
|
|
<div id="panel-content">
|
|
<p>点击节点查看详细信息</p>
|
|
</div>
|
|
<div class="panel-title">关系列表</div>
|
|
<div id="relationship-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="layout-controls">
|
|
<button onclick="changeLayout('force')">力导向</button>
|
|
<button onclick="changeLayout('radial')">辐射状</button>
|
|
<button onclick="changeLayout('circular')">环形</button>
|
|
<button onclick="changeLayout('grid')">网格</button>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #f44;"></div>
|
|
<span>军事关系</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #4f4;"></div>
|
|
<span>家族关系</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #44f;"></div>
|
|
<span>政治关系</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tooltip"></div>
|
|
|
|
<script>
|
|
const width = document.getElementById('graph').clientWidth;
|
|
const height = document.getElementById('graph').clientHeight;
|
|
|
|
const svg = d3.select("#graph")
|
|
.append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
const tooltip = d3.select(".tooltip");
|
|
|
|
// 数据定义
|
|
const nodes = [
|
|
{ id: "卫青", group: 1, type: "person", rank: 63, description: "汉朝大将军，多次击败匈奴的重要将领" },
|
|
{ id: "李广", group: 1, type: "person", rank: 75, description: "汉朝名将，号称飞将军，与匈奴作战七十余次" },
|
|
{ id: "武帝", group: 2, type: "person", rank: 80, description: "汉武帝，发动对匈奴战争的决策者" },
|
|
{ id: "霍去病", group: 1, type: "person", rank: 70, description: "骠骑将军，卫青的外甥，多次大败匈奴" },
|
|
{ id: "张骞", group: 1, type: "person", rank: 42, description: "汉朝外交官，出使西域，也曾参与军事行动" },
|
|
{ id: "匈奴", group: 3, type: "geo", rank: 44, description: "汉朝的主要敌人，北方游牧民族" },
|
|
{ id: "漠北之战", group: 4, type: "event", rank: 6, description: "汉匈决定性战役，卫青和霍去病领军大胜" },
|
|
{ id: "河西之战", group: 4, type: "event", rank: 4, description: "霍去病征讨匈奴的重要战役" },
|
|
{ id: "卫子夫", group: 1, type: "person", rank: 60, description: "卫青的姐姐，汉武帝的皇后" },
|
|
{ id: "李敢", group: 1, type: "person", rank: 50, description: "李广之子，因怨恨卫青而被霍去病射杀" }
|
|
];
|
|
|
|
const links = [
|
|
{ source: "卫青", target: "李广", value: 5, type: "military", description: "军事上下级关系，但存在矛盾" },
|
|
{ source: "卫青", target: "霍去病", value: 8, type: "family", description: "舅甥关系，军事合作" },
|
|
{ source: "卫青", target: "武帝", value: 10, type: "political", description: "君臣关系，深受信任" },
|
|
{ source: "卫青", target: "漠北之战", value: 8, type: "military", description: "领军作战" },
|
|
{ source: "卫青", target: "匈奴", value: 9, type: "military", description: "多次击败匈奴" },
|
|
{ source: "李广", target: "匈奴", value: 8, type: "military", description: "长期对抗匈奴" },
|
|
{ source: "武帝", target: "匈奴", value: 9, type: "political", description: "决策发动战争" },
|
|
{ source: "霍去病", target: "河西之战", value: 8, type: "military", description: "领军作战取得辉煌战果" },
|
|
{ source: "霍去病", target: "漠北之战", value: 7, type: "military", description: "与卫青协同作战" },
|
|
{ source: "卫青", target: "卫子夫", value: 6, type: "family", description: "姐弟关系" },
|
|
{ source: "卫子夫", target: "武帝", value: 7, type: "political", description: "皇后与皇帝关系" },
|
|
{ source: "李广", target: "李敢", value: 5, type: "family", description: "父子关系" },
|
|
{ source: "李敢", target: "卫青", value: 4, type: "military", description: "因李广之死怨恨卫青" },
|
|
{ source: "张骞", target: "卫青", value: 5, type: "military", description: "跟随卫青攻打匈奴" },
|
|
{ source: "张骞", target: "李广", value: 4, type: "military", description: "一同出征匈奴" }
|
|
];
|
|
|
|
// 创建力导向布局
|
|
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(width / 2, height / 2))
|
|
.force("collision", d3.forceCollide().radius(50));
|
|
|
|
// 绘制连线
|
|
const link = svg.append("g")
|
|
.selectAll("line")
|
|
.data(links)
|
|
.enter().append("line")
|
|
.attr("class", d => "link " + d.type)
|
|
.attr("stroke-width", d => Math.sqrt(d.value));
|
|
|
|
// 绘制节点
|
|
const node = svg.append("g")
|
|
.selectAll("g")
|
|
.data(nodes)
|
|
.enter().append("g")
|
|
.call(d3.drag()
|
|
.on("start", dragstarted)
|
|
.on("drag", dragged)
|
|
.on("end", dragended));
|
|
|
|
// 为每个节点添加圆形和文字
|
|
node.append("circle")
|
|
.attr("r", d => 10 + d.rank / 10)
|
|
.attr("class", "node")
|
|
.attr("fill", d => {
|
|
if (d.type === "person") return "#3a7";
|
|
if (d.type === "event") return "#a73";
|
|
return "#73a";
|
|
})
|
|
.on("mouseover", function(event, d) {
|
|
tooltip.style("visibility", "visible")
|
|
.html(`<strong>${d.id}</strong><br>${d.description}`);
|
|
})
|
|
.on("mousemove", function(event) {
|
|
tooltip.style("top", (event.pageY - 10) + "px")
|
|
.style("left", (event.pageX + 10) + "px");
|
|
})
|
|
.on("mouseout", function() {
|
|
tooltip.style("visibility", "hidden");
|
|
})
|
|
.on("click", function(event, d) {
|
|
// 移除之前的高亮
|
|
d3.selectAll(".highlight").classed("highlight", false);
|
|
|
|
// 高亮当前节点
|
|
d3.select(this).classed("highlight", true);
|
|
|
|
// 高亮相关连线
|
|
link.filter(l => l.source.id === d.id || l.target.id === d.id)
|
|
.classed("highlight", true);
|
|
|
|
// 更新面板信息
|
|
updatePanel(d);
|
|
});
|
|
|
|
node.append("text")
|
|
.attr("dy", ".35em")
|
|
.text(d => d.id);
|
|
|
|
// 更新模拟
|
|
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("transform", d => `translate(${d.x},${d.y})`);
|
|
});
|
|
|
|
// 拖拽函数
|
|
function dragstarted(event, d) {
|
|
if (!event.active) simulation.alphaTarget(0.3).restart();
|
|
d.fx = d.x;
|
|
d.fy = d.y;
|
|
}
|
|
|
|
function dragged(event, d) {
|
|
d.fx = event.x;
|
|
d.fy = event.y;
|
|
}
|
|
|
|
function dragended(event, d) {
|
|
if (!event.active) simulation.alphaTarget(0);
|
|
d.fx = null;
|
|
d.fy = null;
|
|
}
|
|
|
|
// 更新面板信息
|
|
function updatePanel(d) {
|
|
const panelContent = d3.select("#panel-content");
|
|
panelContent.html(`
|
|
<h3>${d.id}</h3>
|
|
<p><strong>类型:</strong> ${d.type === "person" ? "人物" : d.type === "event" ? "事件" : "地点"}</p>
|
|
<p><strong>重要性:</strong> ${d.rank}/100</p>
|
|
<p><strong>描述:</strong> ${d.description}</p>
|
|
`);
|
|
|
|
const relationshipList = d3.select("#relationship-list");
|
|
relationshipList.html("");
|
|
|
|
const relatedLinks = links.filter(l => l.source.id === d.id || l.target.id === d.id);
|
|
|
|
relatedLinks.forEach(link => {
|
|
const otherNode = link.source.id === d.id ? link.target.id : link.source.id;
|
|
const relationshipType = link.type === "military" ? "军事关系" :
|
|
link.type === "family" ? "家族关系" : "政治关系";
|
|
|
|
relationshipList.append("div")
|
|
.attr("class", "relationship")
|
|
.html(`
|
|
<strong>${d.id} ↔ ${otherNode}</strong>
|
|
<p>关系类型: ${relationshipType}</p>
|
|
<p>关系描述: ${link.description}</p>
|
|
`);
|
|
});
|
|
}
|
|
|
|
// 布局切换
|
|
function changeLayout(type) {
|
|
simulation.force("charge", d3.forceManyBody().strength(-300));
|
|
|
|
if (type === 'force') {
|
|
simulation.force("link", d3.forceLink(links).id(d => d.id).distance(100))
|
|
.alphaTarget(0.3)
|
|
.restart();
|
|
} else if (type === 'radial') {
|
|
simulation.force("radial", d3.forceRadial(width / 3, width / 2, height / 2))
|
|
.force("link", d3.forceLink(links).id(d => d.id).distance(100))
|
|
.alphaTarget(0.3)
|
|
.restart();
|
|
} else if (type === 'circular') {
|
|
const radius = Math.min(width, height) / 2.5;
|
|
simulation.force("circular", d3.forceRadial(radius, width / 2, height / 2).strength(0.2))
|
|
.force("link", d3.forceLink(links).id(d => d.id).distance(100))
|
|
.alphaTarget(0.3)
|
|
.restart();
|
|
} else if (type === 'grid') {
|
|
simulation.force("grid", d3.forceX(width / 2).strength(0.1))
|
|
.force("grid", d3.forceY(height / 2).strength(0.1))
|
|
.force("link", d3.forceLink(links).id(d => d.id).distance(100))
|
|
.alphaTarget(0.3)
|
|
.restart();
|
|
}
|
|
}
|
|
|
|
// 响应式调整
|
|
window.addEventListener('resize', function() {
|
|
const newWidth = document.getElementById('graph').clientWidth;
|
|
const newHeight = document.getElementById('graph').clientHeight;
|
|
|
|
svg.attr("width", newWidth)
|
|
.attr("height", newHeight);
|
|
|
|
simulation.force("center", d3.forceCenter(newWidth / 2, newHeight / 2))
|
|
.restart();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|