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.
399 lines
15 KiB
399 lines
15 KiB
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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, #1a3a7a);
|
|
font-family: 'Arial', sans-serif;
|
|
color: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#header {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(10,80,150,0.5), rgba(0,0,0,0));
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#title {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
background: linear-gradient(90deg, #ff8a00, #e52e71);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 10px rgba(255,255,255,0.3);
|
|
}
|
|
|
|
#container {
|
|
display: flex;
|
|
height: calc(100vh - 120px);
|
|
}
|
|
|
|
#graph {
|
|
flex: 1;
|
|
border-right: 1px solid #2a4a7a;
|
|
}
|
|
|
|
#panel {
|
|
width: 300px;
|
|
padding: 20px;
|
|
background: rgba(15, 30, 60, 0.8);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.node {
|
|
stroke: #fff;
|
|
stroke-width: 1.5px;
|
|
filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
|
|
}
|
|
|
|
.node text {
|
|
text-anchor: middle;
|
|
dominant-baseline: central;
|
|
fill: white;
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.link {
|
|
stroke-opacity: 0.6;
|
|
}
|
|
|
|
.legend {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#controls {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
background: rgba(15, 30, 60, 0.8);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button {
|
|
background: #2a4a7a;
|
|
color: white;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
margin: 0 5px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background: #3a6a9a;
|
|
}
|
|
|
|
#node-info {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.highlight {
|
|
stroke: gold;
|
|
stroke-width: 3px;
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { stroke-width: 3px; }
|
|
50% { stroke-width: 5px; }
|
|
100% { stroke-width: 3px; }
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
padding: 10px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
border-radius: 5px;
|
|
pointer-events: none;
|
|
max-width: 300px;
|
|
font-size: 14px;
|
|
z-index: 100;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="header">
|
|
<div id="title">刘邦集团人物关系图</div>
|
|
</div>
|
|
|
|
<div id="container">
|
|
<div id="graph"></div>
|
|
<div id="panel">
|
|
<h3>图例</h3>
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #e41a1c;"></div>
|
|
<span>政治联盟</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #377eb8;"></div>
|
|
<span>军事合作</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #4daf4a;"></div>
|
|
<span>婚姻关系</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #ff7f00;"></div>
|
|
<span>敌对关系</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="node-info">
|
|
<h3>节点信息</h3>
|
|
<p>点击节点查看详细信息</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="controls">
|
|
<span>布局:</span>
|
|
<button id="force">力导向</button>
|
|
<button id="radial">辐射状</button>
|
|
<button id="circular">环形</button>
|
|
<button id="grid">网格</button>
|
|
</div>
|
|
|
|
<div class="tooltip" style="opacity: 0;"></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: "刘邦", name: "刘邦", type: "person", rank: 174, description: "汉高祖刘邦，汉朝开国皇帝" },
|
|
{ id: "吕后", name: "吕后", type: "person", rank: 53, description: "汉高祖皇后，汉朝第一位皇后" },
|
|
{ id: "韩信", name: "韩信", type: "person", rank: 285, description: "汉初三大名将之一，淮阴侯" },
|
|
{ id: "张良", name: "张良", type: "person", rank: 223, description: "汉初三杰之一，谋士" },
|
|
{ id: "萧何", name: "萧何", type: "person", rank: 216, description: "汉初三杰之一，丞相" },
|
|
{ id: "项羽", name: "项羽", type: "person", rank: 305, description: "西楚霸王，刘邦的主要对手" },
|
|
{ id: "项伯", name: "项伯", type: "person", rank: 42, description: "项羽的叔父，曾救刘邦" },
|
|
{ id: "曹无伤", name: "曹无伤", type: "person", rank: 10, description: "刘邦部下，背叛后被处死" },
|
|
{ id: "刘姓诸侯", name: "刘姓诸侯", type: "organization", rank: 6, description: "刘氏宗室诸侯" },
|
|
{ id: "吕氏家族", name: "吕氏家族", type: "organization", rank: 4, description: "吕后家族势力" }
|
|
];
|
|
|
|
const links = [
|
|
{ source: "刘邦", target: "吕后", value: 5, type: "婚姻关系" },
|
|
{ source: "刘邦", target: "韩信", value: 8, type: "军事合作" },
|
|
{ source: "刘邦", target: "张良", value: 9, type: "政治联盟" },
|
|
{ source: "刘邦", target: "萧何", value: 9, type: "政治联盟" },
|
|
{ source: "刘邦", target: "项羽", value: 7, type: "敌对关系" },
|
|
{ source: "刘邦", target: "项伯", value: 4, type: "政治联盟" },
|
|
{ source: "刘邦", target: "曹无伤", value: 2, type: "敌对关系" },
|
|
{ source: "刘邦", target: "刘姓诸侯", value: 6, type: "政治联盟" },
|
|
{ source: "吕后", target: "吕氏家族", value: 8, type: "政治联盟" },
|
|
{ source: "吕后", target: "韩信", value: 4, type: "敌对关系" },
|
|
{ source: "项羽", target: "项伯", value: 5, type: "政治联盟" },
|
|
{ source: "项羽", target: "刘邦", value: 7, type: "敌对关系" }
|
|
];
|
|
|
|
// 颜色映射
|
|
const color = d3.scaleOrdinal()
|
|
.domain(["政治联盟", "军事合作", "婚姻关系", "敌对关系"])
|
|
.range(["#e41a1c", "#377eb8", "#4daf4a", "#ff7f00"]);
|
|
|
|
// 创建力导向布局
|
|
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", "link")
|
|
.attr("stroke", d => color(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("class", "node")
|
|
.attr("r", d => 20 + d.rank / 20)
|
|
.attr("fill", d => d.type === "person" ? "#1f77b4" : "#ff7f0e")
|
|
.on("mouseover", function(event, d) {
|
|
tooltip.transition()
|
|
.duration(200)
|
|
.style("opacity", .9);
|
|
tooltip.html("<strong>" + d.name + "</strong><br/>" + d.description)
|
|
.style("left", (event.pageX + 10) + "px")
|
|
.style("top", (event.pageY - 28) + "px");
|
|
|
|
d3.select(this).classed("highlight", true);
|
|
})
|
|
.on("mouseout", function() {
|
|
tooltip.transition()
|
|
.duration(500)
|
|
.style("opacity", 0);
|
|
|
|
d3.select(this).classed("highlight", false);
|
|
})
|
|
.on("click", function(event, d) {
|
|
updatePanel(d);
|
|
});
|
|
|
|
// 添加文本
|
|
node.append("text")
|
|
.attr("dy", ".35em")
|
|
.text(d => d.name);
|
|
|
|
// 更新面板信息
|
|
function updatePanel(d) {
|
|
const panel = d3.select("#node-info");
|
|
panel.html(`
|
|
<h3>${d.name}</h3>
|
|
<p><strong>类型:</strong> ${d.type === "person" ? "人物" : "组织"}</p>
|
|
<p><strong>重要性:</strong> ${d.rank}</p>
|
|
<p><strong>描述:</strong> ${d.description}</p>
|
|
<h4>关系:</h4>
|
|
<ul>
|
|
${links.filter(l => l.source.id === d.id || l.target.id === d.id)
|
|
.map(l => `<li>${l.source.id === d.id ? l.target.id : l.source.id} (${l.type})</li>`).join('')}
|
|
</ul>
|
|
`);
|
|
}
|
|
|
|
// 更新力导向布局
|
|
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").on("click", function() {
|
|
simulation.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))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#radial").on("click", function() {
|
|
simulation.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("x", d3.forceX(width / 2).strength(0.1))
|
|
.force("y", d3.forceY(height / 2).strength(0.1))
|
|
.force("radial", d3.forceRadial(d => d.rank / 4, width / 2, height / 2).strength(0.2))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#circular").on("click", function() {
|
|
simulation.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("radial", d3.forceRadial(200, width / 2, height / 2).strength(0.5))
|
|
.alpha(1).restart();
|
|
});
|
|
|
|
d3.select("#grid").on("click", function() {
|
|
const cols = 3;
|
|
const rows = Math.ceil(nodes.length / cols);
|
|
const cellWidth = width / cols;
|
|
const cellHeight = height / rows;
|
|
|
|
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("link", d3.forceLink(links).id(d => d.id).distance(100))
|
|
.force("charge", null)
|
|
.force("center", null)
|
|
.alpha(1).restart();
|
|
|
|
setTimeout(() => {
|
|
nodes.forEach(d => {
|
|
d.fx = null;
|
|
d.fy = null;
|
|
});
|
|
simulation.alpha(1).restart();
|
|
}, 1000);
|
|
});
|
|
|
|
// 窗口大小变化时重绘
|
|
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))
|
|
.alpha(1).restart();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|