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.
297 lines
14 KiB
297 lines
14 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;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
|
|
font-family: "SimSun", serif;
|
|
}
|
|
#graph-container {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.node {
|
|
stroke: #fff;
|
|
stroke-width: 2px;
|
|
filter: drop-shadow(0 0 5px rgba(255,255,255,0.7));
|
|
transition: all 0.3s ease;
|
|
}
|
|
.node:hover {
|
|
filter: drop-shadow(0 0 10px gold);
|
|
transform: scale(1.1);
|
|
}
|
|
.link {
|
|
stroke: #999;
|
|
stroke-opacity: 0.6;
|
|
}
|
|
#info-panel {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
width: 300px;
|
|
height: 80vh;
|
|
background: rgba(0,0,0,0.7);
|
|
color: white;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
overflow-y: auto;
|
|
box-shadow: 0 0 20px rgba(255,255,255,0.3);
|
|
}
|
|
#controls {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 20px;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
}
|
|
.legend-item {
|
|
margin: 5px 0;
|
|
}
|
|
.legend-color {
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="graph-container">
|
|
<div id="info-panel">
|
|
<h3>人物信息</h3>
|
|
<div id="node-info">点击节点查看详情</div>
|
|
</div>
|
|
<div id="controls">
|
|
<h4>布局切换</h4>
|
|
<button id="force">力导向布局</button>
|
|
<button id="circular">环形布局</button>
|
|
<button id="radial">辐射布局</button>
|
|
<button id="hierarchical">层次布局</button>
|
|
|
|
<h4>关系图例</h4>
|
|
<div class="legend-item"><span class="legend-color" style="background-color: #ff7f0e;"></span>政治联盟</div>
|
|
<div class="legend-item"><span class="legend-color" style="background-color: #1f77b4;"></span>军事关系</div>
|
|
<div class="legend-item"><span class="legend-color" style="background-color: #2ca02c;"></span>家族关系</div>
|
|
<div class="legend-item"><span class="legend-color" style="background-color: #d62728;"></span>敌对关系</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const data = {
|
|
nodes: [
|
|
{id: "刘邦", group: 1, title: "汉高祖刘邦，汉朝开国皇帝", desc: "从沛县小吏到汉朝开国皇帝，依靠萧何、韩信、张良等人才建立汉朝"},
|
|
{id: "吕后", group: 1, title: "吕后，刘邦皇后", desc: "刘邦死后掌握朝政大权，铲除异己"},
|
|
{id: "韩信", group: 2, title: "韩信，汉初三杰之一", desc: "杰出军事家，为刘邦立下汗马功劳，后被吕后设计杀害"},
|
|
{id: "萧何", group: 2, title: "萧何，汉初三杰之一", desc: "刘邦重要谋臣，负责后勤和行政管理"},
|
|
{id: "张良", group: 2, title: "张良，汉初三杰之一", desc: "战略家，多次在关键时刻为刘邦出谋划策"},
|
|
{id: "项羽", group: 3, title: "项羽，西楚霸王", desc: "刘邦主要对手，在楚汉战争中败亡"},
|
|
{id: "项伯", group: 3, title: "项伯，项羽叔父", desc: "鸿门宴中保护刘邦"},
|
|
{id: "曹无伤", group: 3, title: "曹无伤，刘邦部下", desc: "背叛刘邦向项羽告密而被杀"},
|
|
{id: "刘濞", group: 1, title: "刘濞，吴王", desc: "刘邦侄子，后来发动七国之乱"},
|
|
{id: "刘仲", group: 1, title: "刘仲，刘邦兄长", desc: "被封为代王，后因匈奴进攻逃跑被贬"},
|
|
{id: "英布", group: 2, title: "英布，淮南王", desc: "原为项羽部下，后投靠刘邦，最终反叛"},
|
|
{id: "彭越", group: 2, title: "彭越，梁王", desc: "帮助刘邦对抗项羽，后被吕后杀害"},
|
|
{id: "叔孙通", group: 2, title: "叔孙通，儒学家", desc: "为刘邦制定朝廷礼仪"},
|
|
{id: "刘姓诸侯", group: 1, title: "刘姓诸侯", desc: "刘邦分封的同姓诸侯王"},
|
|
{id: "吕氏家族", group: 1, title: "吕氏家族", desc: "吕后掌权时大力扶持的外戚势力"}
|
|
],
|
|
links: [
|
|
{source: "刘邦", target: "吕后", value: 10, relation: "夫妻关系"},
|
|
{source: "刘邦", target: "韩信", value: 8, relation: "军事重用→猜忌诛杀"},
|
|
{source: "刘邦", target: "萧何", value: 9, relation: "政治信任"},
|
|
{source: "刘邦", target: "张良", value: 9, relation: "战略合作"},
|
|
{source: "刘邦", target: "项羽", value: 10, relation: "敌对关系"},
|
|
{source: "刘邦", target: "项伯", value: 5, relation: "政治联盟"},
|
|
{source: "刘邦", target: "曹无伤", value: 3, relation: "背叛关系"},
|
|
{source: "刘邦", target: "刘濞", value: 6, relation: "分封关系"},
|
|
{source: "刘邦", target: "刘仲", value: 4, relation: "兄弟关系"},
|
|
{source: "刘邦", target: "英布", value: 7, relation: "军事合作→平叛"},
|
|
{source: "刘邦", target: "彭越", value: 7, relation: "军事合作→诛杀"},
|
|
{source: "刘邦", target: "叔孙通", value: 5, relation: "政治合作"},
|
|
{source: "刘邦", target: "刘姓诸侯", value: 8, relation: "分封关系"},
|
|
{source: "吕后", target: "韩信", value: 8, relation: "诛杀"},
|
|
{source: "吕后", target: "彭越", value: 7, relation: "诛杀"},
|
|
{source: "吕后", target: "刘姓诸侯", value: 6, relation: "权力斗争"},
|
|
{source: "吕后", target: "吕氏家族", value: 9, relation: "扶持关系"},
|
|
{source: "项羽", target: "项伯", value: 6, relation: "叔侄关系"},
|
|
{source: "项羽", target: "英布", value: 7, relation: "军事合作"},
|
|
{source: "韩信", target: "萧何", value: 7, relation: "推荐关系"},
|
|
{source: "萧何", target: "张良", value: 6, relation: "政治合作"}
|
|
]
|
|
};
|
|
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
|
|
const svg = d3.select("#graph-container")
|
|
.append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
const color = d3.scaleOrdinal()
|
|
.domain([1, 2, 3])
|
|
.range(["#e41a1c", "#377eb8", "#4daf4a"]);
|
|
|
|
const linkColor = d3.scaleOrdinal()
|
|
.domain(["夫妻关系", "军事重用→猜忌诛杀", "政治信任", "战略合作", "敌对关系", "政治联盟", "背叛关系", "分封关系", "兄弟关系", "军事合作→平叛", "军事合作→诛杀", "诛杀", "权力斗争", "扶持关系", "叔侄关系", "军事合作", "推荐关系"])
|
|
.range(["#ff7f0e", "#1f77b4", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff7f0e", "#1f77b4", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"]);
|
|
|
|
const simulation = d3.forceSimulation(data.nodes)
|
|
.force("link", d3.forceLink(data.links).id(d => d.id).distance(150))
|
|
.force("charge", d3.forceManyBody().strength(-500))
|
|
.force("center", d3.forceCenter(width / 2, height / 2))
|
|
.force("collision", d3.forceCollide().radius(60));
|
|
|
|
const link = svg.append("g")
|
|
.selectAll("line")
|
|
.data(data.links)
|
|
.join("line")
|
|
.attr("class", "link")
|
|
.attr("stroke", d => linkColor(d.relation))
|
|
.attr("stroke-width", d => Math.sqrt(d.value));
|
|
|
|
const node = svg.append("g")
|
|
.selectAll("circle")
|
|
.data(data.nodes)
|
|
.join("circle")
|
|
.attr("class", "node")
|
|
.attr("r", d => d.group === 1 ? 20 : d.group === 2 ? 15 : 10)
|
|
.attr("fill", d => color(d.group))
|
|
.call(drag(simulation))
|
|
.on("mouseover", function(event, d) {
|
|
d3.select(this).attr("stroke", "gold").attr("stroke-width", 3);
|
|
showNodeInfo(d);
|
|
})
|
|
.on("mouseout", function() {
|
|
d3.select(this).attr("stroke", null);
|
|
});
|
|
|
|
const label = svg.append("g")
|
|
.selectAll("text")
|
|
.data(data.nodes)
|
|
.join("text")
|
|
.attr("dy", -15)
|
|
.attr("text-anchor", "middle")
|
|
.text(d => d.id)
|
|
.attr("fill", "white")
|
|
.attr("font-size", "12px");
|
|
|
|
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);
|
|
|
|
label
|
|
.attr("x", d => d.x)
|
|
.attr("y", d => d.y);
|
|
});
|
|
|
|
function drag(simulation) {
|
|
function dragstarted(event) {
|
|
if (!event.active) simulation.alphaTarget(0.3).restart();
|
|
event.subject.fx = event.subject.x;
|
|
event.subject.fy = event.subject.y;
|
|
}
|
|
|
|
function dragged(event) {
|
|
event.subject.fx = event.x;
|
|
event.subject.fy = event.y;
|
|
}
|
|
|
|
function dragended(event) {
|
|
if (!event.active) simulation.alphaTarget(0);
|
|
event.subject.fx = null;
|
|
event.subject.fy = null;
|
|
}
|
|
|
|
return d3.drag()
|
|
.on("start", dragstarted)
|
|
.on("drag", dragged)
|
|
.on("end", dragended);
|
|
}
|
|
|
|
function showNodeInfo(d) {
|
|
const infoPanel = d3.select("#node-info");
|
|
infoPanel.html(`
|
|
<h4>${d.id}</h4>
|
|
<p><strong>身份:</strong> ${d.title}</p>
|
|
<p><strong>描述:</strong> ${d.desc}</p>
|
|
<div>
|
|
<strong>相关人物:</strong>
|
|
<ul>
|
|
${data.links
|
|
.filter(link => link.source.id === d.id || link.target.id === d.id)
|
|
.map(link => {
|
|
const otherNode = link.source.id === d.id ? link.target : link.source;
|
|
return `<li>${otherNode.id} (${link.relation})</li>`;
|
|
})
|
|
.join("")}
|
|
</ul>
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
// 布局切换
|
|
d3.select("#force").on("click", function() {
|
|
simulation
|
|
.force("charge", d3.forceManyBody().strength(-500))
|
|
.force("center", d3.forceCenter(width / 2, height / 2))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#circular").on("click", function() {
|
|
const radius = Math.min(width, height) / 2 - 100;
|
|
const angle = d3.scalePoint().domain(data.nodes.map(d => d.id)).range([0, 2 * Math.PI]);
|
|
|
|
simulation
|
|
.force("x", d3.forceX().x(d => width / 2 + radius * Math.sin(angle(d.id))))
|
|
.force("y", d3.forceY().y(d => height / 2 + radius * Math.cos(angle(d.id))))
|
|
.force("charge", null)
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#radial").on("click", function() {
|
|
simulation
|
|
.force("x", d3.forceX(width / 2).strength(0.1))
|
|
.force("y", d3.forceY(height / 2).strength(0.1))
|
|
.force("radial", d3.forceRadial(200, width / 2, height / 2).strength(0.2))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#hierarchical").on("click", function() {
|
|
simulation
|
|
.force("x", d3.forceX().x(d => {
|
|
if (d.id === "刘邦") return width / 2;
|
|
if (["吕后", "韩信", "萧何", "张良", "项羽"].includes(d.id)) return width / 2 + (Math.random() - 0.5) * 200;
|
|
return width / 2 + (Math.random() - 0.5) * 400;
|
|
}))
|
|
.force("y", d3.forceY().y(d => {
|
|
if (d.id === "刘邦") return height / 2 - 100;
|
|
if (["吕后", "韩信", "萧何", "张良", "项羽"].includes(d.id)) return height / 2;
|
|
return height / 2 + 100;
|
|
}))
|
|
.force("charge", d3.forceManyBody().strength(-200))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
// 初始显示刘邦的信息
|
|
showNodeInfo(data.nodes.find(d => d.id === "刘邦"));
|
|
</script>
|
|
</body>
|
|
</html>
|