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.
533 lines
18 KiB
533 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, #0f2027, #203a43, #2c5364);
|
|
font-family: 'Arial', sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#title {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
background: linear-gradient(to right, #ff8a00, #da1b60);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 0 10px rgba(255,255,255,0.3);
|
|
}
|
|
|
|
#container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
#graph {
|
|
width: 70%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
#panel {
|
|
width: 30%;
|
|
height: 100%;
|
|
float: right;
|
|
background: rgba(0,0,0,0.7);
|
|
color: white;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.node {
|
|
stroke: #fff;
|
|
stroke-width: 1.5px;
|
|
filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
|
|
}
|
|
|
|
.node text {
|
|
dominant-baseline: central;
|
|
text-anchor: middle;
|
|
fill: white;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.link {
|
|
stroke-opacity: 0.6;
|
|
}
|
|
|
|
.legend {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
padding: 10px;
|
|
background: rgba(0,0,0,0.8);
|
|
color: white;
|
|
border-radius: 5px;
|
|
pointer-events: none;
|
|
font-size: 14px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.control {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 20px;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
}
|
|
|
|
button {
|
|
background: #444;
|
|
color: white;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
margin: 5px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background: #666;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<h1 id="title">秦汉时期主要人物关系图</h1>
|
|
<div id="graph"></div>
|
|
<div id="panel">
|
|
<h2 id="panel-title">人物信息</h2>
|
|
<div id="panel-content"></div>
|
|
</div>
|
|
<div class="legend">
|
|
<h3>关系类型</h3>
|
|
<div><svg width="20" height="10"><line x1="0" y1="5" x2="20" y2="5" stroke="#ff6666" stroke-width="2"/></svg> 敌对/冲突</div>
|
|
<div><svg width="20" height="10"><line x1="0" y1="5" x2="20" y2="5" stroke="#66ff66" stroke-width="2"/></svg> 合作/辅佐</div>
|
|
<div><svg width="20" height="10"><line x1="0" y1="5" x2="20" y2="5" stroke="#6666ff" stroke-width="2"/></svg> 历史影响</div>
|
|
</div>
|
|
<div class="control">
|
|
<h3>布局切换</h3>
|
|
<button id="force">力导向</button>
|
|
<button id="radial">辐射状</button>
|
|
<button id="circular">环形</button>
|
|
<button id="grid">网格</button>
|
|
</div>
|
|
<div class="tooltip"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Data
|
|
const data = {
|
|
"nodes": [
|
|
{
|
|
"id": "1",
|
|
"name": "刘邦",
|
|
"type": "person",
|
|
"desc": "汉高祖刘邦，汉朝开国皇帝，击败项羽统一天下",
|
|
"rank": 174,
|
|
"group": 1
|
|
},
|
|
{
|
|
"id": "2",
|
|
"name": "秦始皇",
|
|
"type": "person",
|
|
"desc": "嬴政，中国第一个皇帝，统一六国建立秦朝",
|
|
"rank": 105,
|
|
"group": 2
|
|
},
|
|
{
|
|
"id": "3",
|
|
"name": "项羽",
|
|
"type": "person",
|
|
"desc": "西楚霸王，刘邦的主要对手",
|
|
"rank": 90,
|
|
"group": 3
|
|
},
|
|
{
|
|
"id": "4",
|
|
"name": "张良",
|
|
"type": "person",
|
|
"desc": "汉初三杰之一，刘邦的重要谋士",
|
|
"rank": 85,
|
|
"group": 1
|
|
},
|
|
{
|
|
"id": "5",
|
|
"name": "萧何",
|
|
"type": "person",
|
|
"desc": "汉初三杰之一，刘邦的丞相",
|
|
"rank": 80,
|
|
"group": 1
|
|
},
|
|
{
|
|
"id": "6",
|
|
"name": "韩信",
|
|
"type": "person",
|
|
"desc": "汉初三杰之一，著名军事家",
|
|
"rank": 78,
|
|
"group": 1
|
|
},
|
|
{
|
|
"id": "7",
|
|
"name": "李斯",
|
|
"type": "person",
|
|
"desc": "秦始皇的丞相，协助统一六国",
|
|
"rank": 75,
|
|
"group": 2
|
|
},
|
|
{
|
|
"id": "8",
|
|
"name": "吕不韦",
|
|
"type": "person",
|
|
"desc": "秦国丞相，据传是秦始皇生父",
|
|
"rank": 70,
|
|
"group": 2
|
|
},
|
|
{
|
|
"id": "9",
|
|
"name": "吕后",
|
|
"type": "person",
|
|
"desc": "刘邦的皇后，汉朝第一位实际女性统治者",
|
|
"rank": 65,
|
|
"group": 1
|
|
},
|
|
{
|
|
"id": "10",
|
|
"name": "扶苏",
|
|
"type": "person",
|
|
"desc": "秦始皇长子，被胡亥赐死",
|
|
"rank": 60,
|
|
"group": 2
|
|
},
|
|
{
|
|
"id": "11",
|
|
"name": "胡亥",
|
|
"type": "person",
|
|
"desc": "秦二世，秦始皇次子",
|
|
"rank": 55,
|
|
"group": 2
|
|
}
|
|
],
|
|
"links": [
|
|
{
|
|
"source": "1",
|
|
"target": "2",
|
|
"type": "historical",
|
|
"desc": "刘邦的命运与秦始皇关于天子气的预言相关联"
|
|
},
|
|
{
|
|
"source": "1",
|
|
"target": "3",
|
|
"type": "conflict",
|
|
"desc": "楚汉相争，刘邦最终击败项羽"
|
|
},
|
|
{
|
|
"source": "1",
|
|
"target": "4",
|
|
"type": "cooperation",
|
|
"desc": "张良是刘邦的重要谋士"
|
|
},
|
|
{
|
|
"source": "1",
|
|
"target": "5",
|
|
"type": "cooperation",
|
|
"desc": "萧何是刘邦的丞相"
|
|
},
|
|
{
|
|
"source": "1",
|
|
"target": "6",
|
|
"type": "cooperation",
|
|
"desc": "韩信是刘邦的大将"
|
|
},
|
|
{
|
|
"source": "1",
|
|
"target": "9",
|
|
"type": "family",
|
|
"desc": "吕后是刘邦的皇后"
|
|
},
|
|
{
|
|
"source": "2",
|
|
"target": "3",
|
|
"type": "historical",
|
|
"desc": "项羽曾表示要取代秦始皇"
|
|
},
|
|
{
|
|
"source": "2",
|
|
"target": "4",
|
|
"type": "conflict",
|
|
"desc": "张良曾试图刺杀秦始皇"
|
|
},
|
|
{
|
|
"source": "2",
|
|
"target": "7",
|
|
"type": "cooperation",
|
|
"desc": "李斯是秦始皇的丞相"
|
|
},
|
|
{
|
|
"source": "2",
|
|
"target": "8",
|
|
"type": "family",
|
|
"desc": "吕不韦据传是秦始皇生父"
|
|
},
|
|
{
|
|
"source": "2",
|
|
"target": "10",
|
|
"type": "family",
|
|
"desc": "扶苏是秦始皇长子"
|
|
},
|
|
{
|
|
"source": "2",
|
|
"target": "11",
|
|
"type": "family",
|
|
"desc": "胡亥是秦始皇次子"
|
|
},
|
|
{
|
|
"source": "4",
|
|
"target": "5",
|
|
"type": "cooperation",
|
|
"desc": "张良与萧何同为汉初三杰"
|
|
},
|
|
{
|
|
"source": "4",
|
|
"target": "6",
|
|
"type": "cooperation",
|
|
"desc": "张良与韩信同为汉初三杰"
|
|
},
|
|
{
|
|
"source": "5",
|
|
"target": "6",
|
|
"type": "cooperation",
|
|
"desc": "萧何与韩信同为汉初三杰"
|
|
},
|
|
{
|
|
"source": "10",
|
|
"target": "11",
|
|
"type": "conflict",
|
|
"desc": "胡亥篡改诏书继位并赐死扶苏"
|
|
}
|
|
]
|
|
};
|
|
|
|
// Dimensions
|
|
const width = document.getElementById('graph').clientWidth;
|
|
const height = document.getElementById('graph').clientHeight;
|
|
|
|
// Create SVG
|
|
const svg = d3.select("#graph")
|
|
.append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
// Tooltip
|
|
const tooltip = d3.select(".tooltip");
|
|
|
|
// Color scale
|
|
const color = d3.scaleOrdinal()
|
|
.domain([1, 2, 3])
|
|
.range(["#4daf4a", "#e41a1c", "#377eb8"]);
|
|
|
|
// Link color scale
|
|
const linkColor = {
|
|
"conflict": "#ff6666",
|
|
"cooperation": "#66ff66",
|
|
"historical": "#6666ff",
|
|
"family": "#ff66ff"
|
|
};
|
|
|
|
// Simulation
|
|
const simulation = d3.forceSimulation(data.nodes)
|
|
.force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
|
|
.force("charge", d3.forceManyBody().strength(-500))
|
|
.force("x", d3.forceX(width / 2).strength(0.1))
|
|
.force("y", d3.forceY(height / 2).strength(0.1))
|
|
.force("collision", d3.forceCollide().radius(d => Math.sqrt(d.rank) * 2));
|
|
|
|
// Links
|
|
const link = svg.append("g")
|
|
.selectAll("line")
|
|
.data(data.links)
|
|
.enter().append("line")
|
|
.attr("class", "link")
|
|
.attr("stroke", d => linkColor[d.type])
|
|
.attr("stroke-width", 2);
|
|
|
|
// Nodes
|
|
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));
|
|
|
|
// Circles
|
|
node.append("circle")
|
|
.attr("class", "node")
|
|
.attr("r", d => Math.sqrt(d.rank))
|
|
.attr("fill", d => color(d.group))
|
|
.on("mouseover", showTooltip)
|
|
.on("mouseout", hideTooltip)
|
|
.on("click", showPanel);
|
|
|
|
// Labels
|
|
node.append("text")
|
|
.attr("dy", 4)
|
|
.text(d => d.name);
|
|
|
|
// Update positions
|
|
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})`);
|
|
});
|
|
|
|
// Tooltip functions
|
|
function showTooltip(event, d) {
|
|
tooltip
|
|
.style("left", (event.pageX + 10) + "px")
|
|
.style("top", (event.pageY - 10) + "px")
|
|
.style("opacity", 1)
|
|
.html(`<strong>${d.name}</strong><br/>${d.desc}`);
|
|
}
|
|
|
|
function hideTooltip() {
|
|
tooltip.style("opacity", 0);
|
|
}
|
|
|
|
// Panel functions
|
|
function showPanel(event, d) {
|
|
const panelTitle = document.getElementById('panel-title');
|
|
const panelContent = document.getElementById('panel-content');
|
|
|
|
panelTitle.textContent = d.name;
|
|
|
|
let html = `<p><strong>描述:</strong> ${d.desc}</p>`;
|
|
html += `<p><strong>重要性:</strong> ${d.rank}</p>`;
|
|
|
|
// Find related nodes
|
|
const relatedLinks = data.links.filter(link => link.source.id === d.id || link.target.id === d.id);
|
|
|
|
if (relatedLinks.length > 0) {
|
|
html += `<h3>相关关系:</h3><ul>`;
|
|
relatedLinks.forEach(link => {
|
|
const otherId = link.source.id === d.id ? link.target.id : link.source.id;
|
|
const otherNode = data.nodes.find(n => n.id === otherId);
|
|
const relationType = link.type === 'conflict' ? '敌对' :
|
|
link.type === 'cooperation' ? '合作' :
|
|
link.type === 'historical' ? '历史影响' : '家族';
|
|
html += `<li><strong>${otherNode.name}</strong>: ${relationType} - ${link.desc}</li>`;
|
|
});
|
|
html += `</ul>`;
|
|
}
|
|
|
|
panelContent.innerHTML = html;
|
|
}
|
|
|
|
// Drag functions
|
|
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;
|
|
}
|
|
|
|
// Layout controls
|
|
document.getElementById('force').addEventListener('click', function() {
|
|
simulation
|
|
.force("x", d3.forceX(width / 2).strength(0.1))
|
|
.force("y", d3.forceY(height / 2).strength(0.1))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
document.getElementById('radial').addEventListener('click', function() {
|
|
simulation
|
|
.force("x", null)
|
|
.force("y", null)
|
|
.force("radial", d3.forceRadial(height / 3, width / 2, height / 2).strength(0.1))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
document.getElementById('circular').addEventListener('click', function() {
|
|
simulation
|
|
.force("x", null)
|
|
.force("y", null)
|
|
.force("radial", d3.forceRadial(height / 3, width / 2, height / 2).strength(0.1))
|
|
.force("theta", d3.forceTheta().strength(0.1))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
document.getElementById('grid').addEventListener('click', function() {
|
|
const cols = 4;
|
|
const rows = Math.ceil(data.nodes.length / cols);
|
|
const cellWidth = width / cols;
|
|
const cellHeight = height / rows;
|
|
|
|
data.nodes.forEach((d, i) => {
|
|
d.x = (i % cols) * cellWidth + cellWidth / 2;
|
|
d.y = Math.floor(i / cols) * cellHeight + cellHeight / 2;
|
|
d.fx = d.x;
|
|
d.fy = d.y;
|
|
});
|
|
|
|
simulation
|
|
.force("x", null)
|
|
.force("y", null)
|
|
.force("radial", null)
|
|
.alpha(1).restart();
|
|
|
|
setTimeout(() => {
|
|
data.nodes.forEach(d => {
|
|
d.fx = null;
|
|
d.fy = null;
|
|
});
|
|
}, 1000);
|
|
});
|
|
|
|
// Initial panel display
|
|
if (data.nodes.length > 0) {
|
|
showPanel({}, data.nodes[0]);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|