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.
452 lines
18 KiB
452 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, #0a1a2e, #1a3a5a);
|
|
font-family: 'Arial', sans-serif;
|
|
color: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#header {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: linear-gradient(90deg, rgba(10,26,46,0.8), rgba(26,58,90,0.8));
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#title {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
background: linear-gradient(90deg, #ff8a00, #e52e71);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 0 10px rgba(255,138,0,0.3);
|
|
margin: 0;
|
|
}
|
|
|
|
#container {
|
|
display: flex;
|
|
height: calc(100vh - 100px);
|
|
}
|
|
|
|
#graph {
|
|
flex: 3;
|
|
border-right: 1px solid rgba(255,255,255,0.1);
|
|
position: relative;
|
|
}
|
|
|
|
#sidebar {
|
|
flex: 1;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
background: rgba(10,26,46,0.7);
|
|
}
|
|
|
|
.node {
|
|
stroke: #fff;
|
|
stroke-width: 1.5px;
|
|
filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
|
|
}
|
|
|
|
.node text {
|
|
pointer-events: none;
|
|
font-size: 12px;
|
|
text-anchor: middle;
|
|
dominant-baseline: central;
|
|
fill: white;
|
|
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;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 20px;
|
|
height: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#tooltip {
|
|
position: absolute;
|
|
padding: 10px;
|
|
background: rgba(0,0,0,0.8);
|
|
border-radius: 5px;
|
|
pointer-events: none;
|
|
max-width: 300px;
|
|
display: none;
|
|
}
|
|
|
|
#details {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.detail-item {
|
|
margin-bottom: 15px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.detail-title {
|
|
font-weight: bold;
|
|
color: #ff8a00;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.control-panel {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.control-btn {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
padding: 5px 10px;
|
|
background: rgba(255,255,255,0.1);
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.control-btn:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="header">
|
|
<h1 id="title">刘邦集团核心人物关系网络</h1>
|
|
</div>
|
|
|
|
<div id="container">
|
|
<div id="graph"></div>
|
|
<div id="sidebar">
|
|
<h3>人物详情</h3>
|
|
<div id="details"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tooltip"></div>
|
|
|
|
<div class="legend">
|
|
<h4>关系类型</h4>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #4daf4a;"></div>
|
|
<span>政治联盟</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #e41a1c;"></div>
|
|
<span>敌对关系</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #377eb8;"></div>
|
|
<span>军事合作</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #984ea3;"></div>
|
|
<span>亲属关系</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-panel">
|
|
<h4>布局切换</h4>
|
|
<button class="control-btn" id="force-layout">力导向布局</button>
|
|
<button class="control-btn" id="radial-layout">辐射状布局</button>
|
|
<button class="control-btn" id="circular-layout">环形布局</button>
|
|
<button class="control-btn" id="grid-layout">网格布局</button>
|
|
</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 simulation = d3.forceSimulation()
|
|
.force("link", d3.forceLink().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(60));
|
|
|
|
const data = {
|
|
nodes: [
|
|
{ id: "1", name: "刘邦", type: "emperor", description: "汉高祖，西汉开国皇帝", importance: 10 },
|
|
{ id: "2", name: "吕后", type: "empress", description: "刘邦的皇后，汉惠帝之母", importance: 8 },
|
|
{ id: "3", name: "韩信", type: "general", description: "汉初三杰之一，著名军事家", importance: 9 },
|
|
{ id: "4", name: "萧何", type: "minister", description: "汉初三杰之一，丞相", importance: 8 },
|
|
{ id: "5", name: "张良", type: "advisor", description: "汉初三杰之一，著名谋士", importance: 9 },
|
|
{ id: "6", name: "项羽", type: "rival", description: "刘邦的主要对手，西楚霸王", importance: 8 },
|
|
{ id: "7", name: "英布", type: "general", description: "汉初名将，后反叛", importance: 6 },
|
|
{ id: "8", name: "彭越", type: "general", description: "汉初名将，后反叛", importance: 6 },
|
|
{ id: "9", name: "曹参", type: "minister", description: "汉初丞相，萧何继任者", importance: 6 },
|
|
{ id: "10", name: "陈平", type: "advisor", description: "汉初谋士，后为丞相", importance: 7 },
|
|
{ id: "11", name: "周勃", type: "general", description: "汉初名将，后为丞相", importance: 7 },
|
|
{ id: "12", name: "樊哙", type: "general", description: "刘邦的连襟，汉初名将", importance: 6 },
|
|
{ id: "13", name: "刘盈", type: "emperor", description: "汉惠帝，刘邦与吕后之子", importance: 5 },
|
|
{ id: "14", name: "刘如意", type: "prince", description: "刘邦与戚夫人之子", importance: 4 },
|
|
{ id: "15", name: "戚夫人", type: "consort", description: "刘邦宠妃，刘如意之母", importance: 4 }
|
|
],
|
|
links: [
|
|
{ source: "1", target: "2", type: "marriage", description: "夫妻关系" },
|
|
{ source: "1", target: "3", type: "political", description: "重用韩信但最终处死" },
|
|
{ source: "1", target: "4", type: "political", description: "重用萧何，位列三杰" },
|
|
{ source: "1", target: "5", type: "political", description: "重用张良，位列三杰" },
|
|
{ source: "1", target: "6", type: "enemy", description: "楚汉争霸主要对手" },
|
|
{ source: "1", target: "7", type: "military", description: "曾为盟友后反叛" },
|
|
{ source: "1", target: "8", type: "military", description: "曾为盟友后反叛" },
|
|
{ source: "1", target: "9", type: "political", description: "继任丞相" },
|
|
{ source: "1", target: "10", type: "political", description: "重要谋士" },
|
|
{ source: "1", target: "11", type: "military", description: "重要将领" },
|
|
{ source: "1", target: "12", type: "family", description: "连襟关系" },
|
|
{ source: "1", target: "13", type: "family", description: "父子关系" },
|
|
{ source: "1", target: "14", type: "family", description: "父子关系" },
|
|
{ source: "1", target: "15", type: "marriage", description: "宠妃关系" },
|
|
{ source: "2", target: "13", type: "family", description: "母子关系" },
|
|
{ source: "2", target: "15", type: "enemy", description: "政敌关系" },
|
|
{ source: "2", target: "14", type: "enemy", description: "政敌关系" },
|
|
{ source: "2", target: "3", type: "political", description: "吕后设计处死韩信" },
|
|
{ source: "2", target: "7", type: "political", description: "吕后设计处死英布" },
|
|
{ source: "2", target: "8", type: "political", description: "吕后设计处死彭越" },
|
|
{ source: "4", target: "3", type: "political", description: "萧何推荐韩信" },
|
|
{ source: "5", target: "6", type: "political", description: "张良曾为项羽部下" },
|
|
{ source: "3", target: "6", type: "military", description: "韩信击败项羽" },
|
|
{ source: "11", target: "2", type: "political", description: "周勃平定诸吕之乱" }
|
|
]
|
|
};
|
|
|
|
const colorScale = d3.scaleOrdinal()
|
|
.domain(["political", "enemy", "military", "family", "marriage"])
|
|
.range(["#4daf4a", "#e41a1c", "#377eb8", "#984ea3", "#ff7f00"]);
|
|
|
|
const nodeSizeScale = d3.scaleLinear()
|
|
.domain([4, 10])
|
|
.range([30, 60]);
|
|
|
|
const link = svg.append("g")
|
|
.attr("class", "links")
|
|
.selectAll("line")
|
|
.data(data.links)
|
|
.enter().append("line")
|
|
.attr("class", "link")
|
|
.attr("stroke", d => colorScale(d.type))
|
|
.attr("stroke-width", 2);
|
|
|
|
const node = svg.append("g")
|
|
.attr("class", "nodes")
|
|
.selectAll("g")
|
|
.data(data.nodes)
|
|
.enter().append("g")
|
|
.call(d3.drag()
|
|
.on("start", dragstarted)
|
|
.on("drag", dragged)
|
|
.on("end", dragended));
|
|
|
|
node.append("circle")
|
|
.attr("class", "node")
|
|
.attr("r", d => nodeSizeScale(d.importance))
|
|
.attr("fill", d => {
|
|
if (d.type === "emperor") return "#d62728";
|
|
if (d.type === "empress") return "#9467bd";
|
|
if (d.type === "general") return "#1f77b4";
|
|
if (d.type === "minister") return "#2ca02c";
|
|
if (d.type === "advisor") return "#ff7f0e";
|
|
if (d.type === "rival") return "#8c564b";
|
|
if (d.type === "consort") return "#e377c2";
|
|
return "#7f7f7f";
|
|
})
|
|
.on("mouseover", function(event, d) {
|
|
d3.select("#tooltip")
|
|
.style("display", "block")
|
|
.html(`<strong>${d.name}</strong><br>${d.description}<br><em>重要性: ${d.importance}</em>`)
|
|
.style("left", (event.pageX + 10) + "px")
|
|
.style("top", (event.pageY + 10) + "px");
|
|
|
|
d3.select(this)
|
|
.attr("stroke", "white")
|
|
.attr("stroke-width", 3)
|
|
.attr("filter", "url(#glow)");
|
|
})
|
|
.on("mouseout", function() {
|
|
d3.select("#tooltip").style("display", "none");
|
|
d3.select(this)
|
|
.attr("stroke", null)
|
|
.attr("stroke-width", null)
|
|
.attr("filter", null);
|
|
})
|
|
.on("click", function(event, d) {
|
|
updateDetails(d);
|
|
});
|
|
|
|
node.append("text")
|
|
.attr("dy", ".35em")
|
|
.text(d => d.name);
|
|
|
|
defs = svg.append("defs");
|
|
defs.append("filter")
|
|
.attr("id", "glow")
|
|
.append("feGaussianBlur")
|
|
.attr("stdDeviation", "3.5")
|
|
.attr("result", "coloredBlur");
|
|
|
|
const feMerge = defs.select("filter").append("feMerge");
|
|
feMerge.append("feMergeNode").attr("in", "coloredBlur");
|
|
feMerge.append("feMergeNode").attr("in", "SourceGraphic");
|
|
|
|
simulation
|
|
.nodes(data.nodes)
|
|
.on("tick", ticked);
|
|
|
|
simulation.force("link")
|
|
.links(data.links);
|
|
|
|
function ticked() {
|
|
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 updateDetails(d) {
|
|
const details = d3.select("#details");
|
|
details.html("");
|
|
|
|
details.append("div")
|
|
.attr("class", "detail-item")
|
|
.html(`<div class="detail-title">${d.name}</div><div>${d.description}</div>`);
|
|
|
|
const relatedLinks = data.links.filter(link => link.source.id === d.id || link.target.id === d.id);
|
|
|
|
const relations = details.append("div")
|
|
.attr("class", "detail-item");
|
|
|
|
relations.append("div")
|
|
.attr("class", "detail-title")
|
|
.text("关系网络");
|
|
|
|
const relationList = relations.append("ul")
|
|
.style("list-style", "none")
|
|
.style("padding", "0")
|
|
.style("margin", "0");
|
|
|
|
relatedLinks.forEach(link => {
|
|
const otherNode = link.source.id === d.id ?
|
|
data.nodes.find(n => n.id === link.target.id) :
|
|
data.nodes.find(n => n.id === link.source.id);
|
|
|
|
relationList.append("li")
|
|
.html(`<span style="display:inline-block;width:10px;height:10px;background:${colorScale(link.type)};margin-right:5px;"></span>
|
|
<strong>${otherNode.name}</strong>: ${link.description}`);
|
|
});
|
|
}
|
|
|
|
// Layout controls
|
|
d3.select("#force-layout").on("click", function() {
|
|
simulation.force("charge", d3.forceManyBody().strength(-300));
|
|
simulation.force("center", d3.forceCenter(width / 2, height / 2));
|
|
simulation.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#radial-layout").on("click", function() {
|
|
simulation.force("center", null);
|
|
data.nodes.forEach(d => {
|
|
const angle = (d.id - 1) / data.nodes.length * 2 * Math.PI;
|
|
d.fx = width / 2 + Math.cos(angle) * 200;
|
|
d.fy = height / 2 + Math.sin(angle) * 200;
|
|
});
|
|
simulation.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#circular-layout").on("click", function() {
|
|
simulation.force("center", null);
|
|
data.nodes.forEach((d, i) => {
|
|
const angle = i / data.nodes.length * 2 * Math.PI;
|
|
d.fx = width / 2 + Math.cos(angle) * 300;
|
|
d.fy = height / 2 + Math.sin(angle) * 300;
|
|
});
|
|
simulation.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#grid-layout").on("click", function() {
|
|
simulation.force("center", null);
|
|
const cols = Math.ceil(Math.sqrt(data.nodes.length));
|
|
const spacing = Math.min(width, height) / (cols + 1);
|
|
data.nodes.forEach((d, i) => {
|
|
const row = Math.floor(i / cols);
|
|
const col = i % cols;
|
|
d.fx = col * spacing + spacing;
|
|
d.fy = row * spacing + spacing;
|
|
});
|
|
simulation.alpha(1).restart();
|
|
});
|
|
|
|
// Initial details
|
|
updateDetails(data.nodes[0]);
|
|
|
|
// Responsive resize
|
|
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));
|
|
simulation.alpha(1).restart();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|