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.
437 lines
18 KiB
437 lines
18 KiB
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>秦汉时期人物关系网络图</title>
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: linear-gradient(135deg, #0a1a3a, #1a3a7a);
|
|
font-family: "Microsoft YaHei", sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#title {
|
|
position: absolute;
|
|
top: 20px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
background: linear-gradient(to right, #ff8a00, #e52e71);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 0 10px rgba(255,255,255,0.3);
|
|
z-index: 100;
|
|
}
|
|
|
|
#graph-container {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 0;
|
|
width: 70%;
|
|
height: calc(100vh - 100px);
|
|
}
|
|
|
|
#info-panel {
|
|
position: absolute;
|
|
top: 80px;
|
|
right: 0;
|
|
width: 30%;
|
|
height: calc(100vh - 100px);
|
|
background-color: rgba(10, 26, 58, 0.8);
|
|
border-left: 1px solid #2a4a8a;
|
|
padding: 20px;
|
|
color: #fff;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.node {
|
|
stroke: #fff;
|
|
stroke-width: 1.5px;
|
|
filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
|
|
}
|
|
|
|
.link {
|
|
stroke-opacity: 0.6;
|
|
}
|
|
|
|
.legend {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
background-color: rgba(10, 26, 58, 0.8);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
padding: 10px;
|
|
background: rgba(10, 26, 58, 0.9);
|
|
color: #fff;
|
|
border: 1px solid #2a4a8a;
|
|
border-radius: 5px;
|
|
pointer-events: none;
|
|
font-size: 12px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.control {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 20px;
|
|
z-index: 100;
|
|
}
|
|
|
|
button {
|
|
background: #2a4a8a;
|
|
color: white;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
margin: 5px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background: #3a5a9a;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="title">秦汉时期核心人物关系图谱</div>
|
|
<div id="graph-container"></div>
|
|
<div id="info-panel">
|
|
<h3 id="selected-name">点击节点查看详情</h3>
|
|
<div id="selected-desc"></div>
|
|
<h4>关系列表</h4>
|
|
<div id="relations-list"></div>
|
|
</div>
|
|
<div class="legend">
|
|
<h4>关系类型图例</h4>
|
|
<div><svg width="20" height="10"><line x1="0" y1="5" x2="20" y2="5" stroke="#ff7f0e" stroke-width="2"/></svg> 政治关系</div>
|
|
<div><svg width="20" height="10"><line x1="0" y1="5" x2="20" y2="5" stroke="#1f77b4" stroke-width="2"/></svg> 军事关系</div>
|
|
<div><svg width="20" height="10"><line x1="0" y1="5" x2="20" y2="5" stroke="#2ca02c" stroke-width="2"/></svg> 历史影响</div>
|
|
<div><svg width="20" height="10"><line x1="0" y1="5" x2="20" y2="5" stroke="#d62728" stroke-width="2"/></svg> 敌对关系</div>
|
|
</div>
|
|
<div class="control">
|
|
<button id="force-layout">力导向布局</button>
|
|
<button id="radial-layout">辐射状布局</button>
|
|
<button id="circular-layout">环形布局</button>
|
|
<button id="grid-layout">网格布局</button>
|
|
</div>
|
|
<div class="tooltip"></div>
|
|
|
|
<script>
|
|
const width = document.getElementById('graph-container').clientWidth;
|
|
const height = document.getElementById('graph-container').clientHeight;
|
|
|
|
const svg = d3.select("#graph-container")
|
|
.append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
const tooltip = d3.select(".tooltip");
|
|
|
|
// 定义3D效果
|
|
const defs = svg.append("defs");
|
|
|
|
// 创建数据
|
|
const data = {
|
|
"nodes": [
|
|
{
|
|
"id": "1",
|
|
"name": "刘邦",
|
|
"type": "person",
|
|
"desc": "汉高祖，西汉开国皇帝，击败项羽统一天下",
|
|
"rank": 174,
|
|
"group": 1
|
|
},
|
|
{
|
|
"id": "2",
|
|
"name": "秦始皇",
|
|
"type": "person",
|
|
"desc": "中国历史上第一位皇帝，统一六国，建立秦朝",
|
|
"rank": 105,
|
|
"group": 1
|
|
},
|
|
{
|
|
"id": "3",
|
|
"name": "项羽",
|
|
"type": "person",
|
|
"desc": "西楚霸王，刘邦的主要对手，最终在楚汉战争中失败",
|
|
"rank": 100,
|
|
"group": 1
|
|
},
|
|
{
|
|
"id": "4",
|
|
"name": "张良",
|
|
"type": "person",
|
|
"desc": "汉初三杰之一，刘邦的重要谋士",
|
|
"rank": 90,
|
|
"group": 2
|
|
},
|
|
{
|
|
"id": "5",
|
|
"name": "萧何",
|
|
"type": "person",
|
|
"desc": "汉初三杰之一，负责后勤和行政",
|
|
"rank": 85,
|
|
"group": 2
|
|
},
|
|
{
|
|
"id": "6",
|
|
"name": "韩信",
|
|
"type": "person",
|
|
"desc": "汉初三杰之一，杰出的军事将领",
|
|
"rank": 80,
|
|
"group": 2
|
|
},
|
|
{
|
|
"id": "7",
|
|
"name": "李斯",
|
|
"type": "person",
|
|
"desc": "秦朝丞相，协助秦始皇统一六国",
|
|
"rank": 75,
|
|
"group": 3
|
|
},
|
|
{
|
|
"id": "8",
|
|
"name": "吕不韦",
|
|
"type": "person",
|
|
"desc": "秦国丞相，传说为秦始皇生父",
|
|
"rank": 70,
|
|
"group": 3
|
|
},
|
|
{
|
|
"id": "9",
|
|
"name": "扶苏",
|
|
"type": "person",
|
|
"desc": "秦始皇长子，因谏言被贬",
|
|
"rank": 65,
|
|
"group": 3
|
|
},
|
|
{
|
|
"id": "10",
|
|
"name": "胡亥",
|
|
"type": "person",
|
|
"desc": "秦二世，秦始皇幼子，秦朝灭亡的罪魁祸首",
|
|
"rank": 60,
|
|
"group": 3
|
|
}
|
|
],
|
|
"links": [
|
|
{ "source": "1", "target": "2", "value": 5, "type": "历史影响", "desc": "刘邦的命运与秦始皇关于天子气的预言相关联" },
|
|
{ "source": "1", "target": "3", "value": 8, "type": "敌对关系", "desc": "楚汉争霸的主要对手" },
|
|
{ "source": "1", "target": "4", "value": 7, "type": "政治关系", "desc": "刘邦与谋士张良的关系" },
|
|
{ "source": "1", "target": "5", "value": 7, "type": "政治关系", "desc": "刘邦与萧何的关系" },
|
|
{ "source": "1", "target": "6", "value": 6, "type": "军事关系", "desc": "刘邦与大将韩信的关系" },
|
|
{ "source": "2", "target": "3", "value": 4, "type": "历史影响", "desc": "项羽目睹秦始皇出巡后提出取代他的言论" },
|
|
{ "source": "2", "target": "7", "value": 6, "type": "政治关系", "desc": "秦始皇与丞相李斯的关系" },
|
|
{ "source": "2", "target": "8", "value": 5, "type": "政治关系", "desc": "秦始皇与吕不韦的复杂关系" },
|
|
{ "source": "2", "target": "9", "value": 4, "type": "政治关系", "desc": "秦始皇与长子扶苏的关系" },
|
|
{ "source": "2", "target": "10", "value": 4, "type": "政治关系", "desc": "秦始皇与幼子胡亥的关系" },
|
|
{ "source": "4", "target": "2", "value": 5, "type": "敌对关系", "desc": "张良曾试图刺杀秦始皇" },
|
|
{ "source": "7", "target": "8", "value": 3, "type": "政治关系", "desc": "李斯与吕不韦的政治关系" },
|
|
{ "source": "9", "target": "10", "value": 4, "type": "敌对关系", "desc": "扶苏与胡亥的继承权之争" },
|
|
{ "source": "6", "target": "3", "value": 5, "type": "军事关系", "desc": "韩信在楚汉战争中对项羽的军事行动" }
|
|
]
|
|
};
|
|
|
|
// 颜色映射
|
|
const colorMap = {
|
|
"政治关系": "#1f77b4",
|
|
"军事关系": "#ff7f0e",
|
|
"历史影响": "#2ca02c",
|
|
"敌对关系": "#d62728"
|
|
};
|
|
|
|
// 创建力导向布局
|
|
const simulation = d3.forceSimulation(data.nodes)
|
|
.force("link", d3.forceLink(data.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(d => Math.sqrt(d.rank) + 25));
|
|
|
|
// 绘制链接
|
|
const link = svg.append("g")
|
|
.selectAll("line")
|
|
.data(data.links)
|
|
.enter()
|
|
.append("line")
|
|
.attr("class", "link")
|
|
.attr("stroke", d => colorMap[d.type])
|
|
.attr("stroke-width", d => Math.sqrt(d.value));
|
|
|
|
// 创建节点组
|
|
const node = svg.append("g")
|
|
.selectAll("g")
|
|
.data(data.nodes)
|
|
.enter()
|
|
.append("g")
|
|
.call(d3.drag()
|
|
.on("start", dragstarted)
|
|
.on("drag", dragged)
|
|
.on("end", dragended));
|
|
|
|
// 添加3D圆形效果
|
|
node.each(function(d) {
|
|
const nodeGroup = d3.select(this);
|
|
|
|
// 添加3D效果
|
|
const gradient = defs.append("radialGradient")
|
|
.attr("id", `gradient-${d.id}`)
|
|
.attr("cx", "30%")
|
|
.attr("cy", "30%")
|
|
.attr("r", "70%");
|
|
|
|
gradient.append("stop")
|
|
.attr("offset", "0%")
|
|
.attr("stop-color", d3.interpolateRgb("#fff", d3.schemeSet1[d.group])(0.6));
|
|
|
|
gradient.append("stop")
|
|
.attr("offset", "100%")
|
|
.attr("stop-color", d3.schemeSet1[d.group]);
|
|
|
|
nodeGroup.append("circle")
|
|
.attr("class", "node")
|
|
.attr("r", d => Math.sqrt(d.rank) + 20)
|
|
.attr("fill", `url(#gradient-${d.id})`)
|
|
.on("mouseover", function(event, d) {
|
|
tooltip.transition()
|
|
.duration(200)
|
|
.style("opacity", .9);
|
|
tooltip.html(`<strong>${d.name}</strong><br/>${d.desc}`)
|
|
.style("left", (event.pageX + 10) + "px")
|
|
.style("top", (event.pageY - 28) + "px");
|
|
|
|
// 高亮节点和连接线
|
|
d3.select(this).attr("stroke-width", 3).attr("stroke", "#fff");
|
|
|
|
link.style("stroke-opacity", l => (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1);
|
|
})
|
|
.on("mouseout", function(d) {
|
|
tooltip.transition()
|
|
.duration(500)
|
|
.style("opacity", 0);
|
|
|
|
d3.select(this).attr("stroke-width", 1.5);
|
|
link.style("stroke-opacity", 0.6);
|
|
})
|
|
.on("click", function(event, d) {
|
|
// 更新信息面板
|
|
d3.select("#selected-name").text(d.name);
|
|
d3.select("#selected-desc").html(`<p>${d.desc}</p><p>重要性: ${d.rank}</p>`);
|
|
|
|
// 更新关系列表
|
|
const relations = data.links.filter(l => l.source.id === d.id || l.target.id === d.id);
|
|
let relationsHtml = "<ul>";
|
|
relations.forEach(r => {
|
|
const otherNode = r.source.id === d.id ? data.nodes.find(n => n.id === r.target.id) : data.nodes.find(n => n.id === r.source.id);
|
|
relationsHtml += `<li><span style="color:${colorMap[r.type]}">${r.type}</span> - 与 ${otherNode.name}: ${r.desc}</li>`;
|
|
});
|
|
relationsHtml += "</ul>";
|
|
d3.select("#relations-list").html(relationsHtml);
|
|
|
|
// 高亮相关节点和连接线
|
|
node.select("circle").attr("stroke-width", 1.5).attr("stroke", "#fff");
|
|
link.style("stroke-width", d => Math.sqrt(d.value));
|
|
|
|
const relatedNodes = new Set();
|
|
relations.forEach(r => {
|
|
relatedNodes.add(r.source.id);
|
|
relatedNodes.add(r.target.id);
|
|
});
|
|
|
|
node.select("circle").attr("opacity", n => relatedNodes.has(n.id) ? 1 : 0.2);
|
|
link.style("opacity", l => relatedNodes.has(l.source.id) && relatedNodes.has(l.target.id) ? 1 : 0.1);
|
|
});
|
|
|
|
// 添加文字
|
|
nodeGroup.append("text")
|
|
.attr("dy", 4)
|
|
.attr("text-anchor", "middle")
|
|
.attr("dominant-baseline", "central")
|
|
.text(d => d.name)
|
|
.style("fill", "#fff")
|
|
.style("font-size", d => Math.sqrt(d.rank) + 10 + "px")
|
|
.style("pointer-events", "none");
|
|
});
|
|
|
|
// 更新位置
|
|
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;
|
|
}
|
|
|
|
// 布局切换
|
|
d3.select("#force-layout").on("click", function() {
|
|
simulation.force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
|
|
.force("charge", d3.forceManyBody().strength(-300))
|
|
.force("center", d3.forceCenter(width / 2, height / 2))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#radial-layout").on("click", function() {
|
|
const radius = Math.min(width, height) / 2 - 100;
|
|
simulation.force("link", d3.forceLink(data.links).id(d => d.id).distance(150))
|
|
.force("charge", d3.forceManyBody().strength(-50))
|
|
.force("center", null)
|
|
.force("x", d3.forceX().x(d => Math.cos((data.nodes.indexOf(d) / data.nodes.length) * 2 * Math.PI) * radius + width/2))
|
|
.force("y", d3.forceY().y(d => Math.sin((data.nodes.indexOf(d) / data.nodes.length) * 2 * Math.PI) * radius + height/2))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#circular-layout").on("click", function() {
|
|
const radius = Math.min(width, height) / 2 - 100;
|
|
simulation.force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
|
|
.force("charge", d3.forceManyBody().strength(-300))
|
|
.force("center", d3.forceCenter(width / 2, height / 2))
|
|
.force("radial", d3.forceRadial(radius, width/2, height/2).strength(0.1))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#grid-layout").on("click", function() {
|
|
const cols = Math.ceil(Math.sqrt(data.nodes.length));
|
|
const spacing = Math.min(width, height) / (cols + 1);
|
|
|
|
simulation.force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
|
|
.force("charge", null)
|
|
.force("center", null)
|
|
.force("x", d3.forceX().x(d => (data.nodes.indexOf(d) % cols) * spacing + spacing))
|
|
.force("y", d3.forceY().y(d => Math.floor(data.nodes.indexOf(d) / cols) * spacing + spacing))
|
|
.alpha(1).restart();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|