-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathgraph_7.html
More file actions
148 lines (134 loc) · 8.03 KB
/
Copy pathgraph_7.html
File metadata and controls
148 lines (134 loc) · 8.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>民间借贷 - 知识图谱</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f5f5f5;
}
#container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
#header {
background: #6C5CE7;
color: white;
padding: 20px;
text-align: center;
}
#graph {
flex: 1;
position: relative;
}
.node {
cursor: pointer;
}
.node circle {
stroke: #fff;
stroke-width: 2px;
}
.node text {
font-size: 12px;
pointer-events: none;
text-anchor: middle;
}
.link {
stroke: #999;
stroke-opacity: 0.6;
}
.tooltip {
position: absolute;
background: rgba(0,0,0,0.8);
color: white;
padding: 10px;
border-radius: 5px;
pointer-events: none;
display: none;
max-width: 300px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>民间借贷</h1>
<p>知识图谱可视化</p>
</div>
<div id="graph"></div>
</div>
<div class="tooltip"></div>
<script>
const data = {"nodes": [{"id": "case_7", "label": "民间借贷", "type": "case_type", "size": 40, "color": "#FF6B6B", "description": "自然人、法人、其他组织之间及其相互之间进行资金融通的行为"}, {"id": "part_25", "label": "审查案件是否受理的基本条件", "type": "framework_part", "size": 25, "color": "#4ECDC4", "parent": "case_7"}, {"id": "part_26", "label": "审查原告诉讼请求是否成立", "type": "framework_part", "size": 25, "color": "#4ECDC4", "parent": "case_7"}, {"id": "part_27", "label": "审查被告抗辩理由是否成立", "type": "framework_part", "size": 25, "color": "#4ECDC4", "parent": "case_7"}, {"id": "part_28", "label": "审查案件核心要件和裁判规则", "type": "framework_part", "size": 25, "color": "#4ECDC4", "parent": "case_7"}, {"id": "evidence_73", "label": "身份证明", "type": "evidence", "size": 12, "color": "#FF6B6B", "party_type": "defendant", "necessity": "必需"}, {"id": "evidence_74", "label": "答辩状", "type": "evidence", "size": 12, "color": "#FF6B6B", "party_type": "defendant", "necessity": "必需"}, {"id": "evidence_75", "label": "反驳证据", "type": "evidence", "size": 12, "color": "#FF6B6B", "party_type": "defendant", "necessity": "必需"}, {"id": "evidence_76", "label": "事实证据", "type": "evidence", "size": 12, "color": "#FF6B6B", "party_type": "defendant", "necessity": "重要"}, {"id": "evidence_77", "label": "法律依据", "type": "evidence", "size": 12, "color": "#FF6B6B", "party_type": "defendant", "necessity": "重要"}, {"id": "evidence_67", "label": "身份证明", "type": "evidence", "size": 12, "color": "#FFE66D", "party_type": "plaintiff", "necessity": "必需"}, {"id": "evidence_68", "label": "起诉状", "type": "evidence", "size": 12, "color": "#FFE66D", "party_type": "plaintiff", "necessity": "必需"}, {"id": "evidence_69", "label": "证据清单", "type": "evidence", "size": 12, "color": "#FFE66D", "party_type": "plaintiff", "necessity": "必需"}, {"id": "evidence_70", "label": "核心事实证据", "type": "evidence", "size": 12, "color": "#FFE66D", "party_type": "plaintiff", "necessity": "必需"}, {"id": "evidence_71", "label": "辅助证据", "type": "evidence", "size": 12, "color": "#FFE66D", "party_type": "plaintiff", "necessity": "重要"}, {"id": "evidence_72", "label": "法律依据", "type": "evidence", "size": 12, "color": "#FFE66D", "party_type": "plaintiff", "necessity": "重要"}], "edges": [{"source": "case_7", "target": "part_25", "label": "包含", "type": "hierarchy"}, {"source": "case_7", "target": "part_26", "label": "包含", "type": "hierarchy"}, {"source": "case_7", "target": "part_27", "label": "包含", "type": "hierarchy"}, {"source": "case_7", "target": "part_28", "label": "包含", "type": "hierarchy"}, {"source": "case_7", "target": "evidence_73", "label": "defendant", "type": "requires"}, {"source": "case_7", "target": "evidence_74", "label": "defendant", "type": "requires"}, {"source": "case_7", "target": "evidence_75", "label": "defendant", "type": "requires"}, {"source": "case_7", "target": "evidence_76", "label": "defendant", "type": "requires"}, {"source": "case_7", "target": "evidence_77", "label": "defendant", "type": "requires"}, {"source": "case_7", "target": "evidence_67", "label": "plaintiff", "type": "requires"}, {"source": "case_7", "target": "evidence_68", "label": "plaintiff", "type": "requires"}, {"source": "case_7", "target": "evidence_69", "label": "plaintiff", "type": "requires"}, {"source": "case_7", "target": "evidence_70", "label": "plaintiff", "type": "requires"}, {"source": "case_7", "target": "evidence_71", "label": "plaintiff", "type": "requires"}, {"source": "case_7", "target": "evidence_72", "label": "plaintiff", "type": "requires"}], "metadata": {"case_id": 7, "case_name": "民间借贷", "description": "自然人、法人、其他组织之间及其相互之间进行资金融通的行为"}};
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(data.nodes)
.force('link', d3.forceLink(data.edges).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(30));
const link = svg.append('g')
.selectAll('line')
.data(data.edges)
.join('line')
.attr('class', 'link')
.attr('stroke-width', 2);
const node = svg.append('g')
.selectAll('.node')
.data(data.nodes)
.join('g')
.attr('class', 'node')
.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended));
node.append('circle')
.attr('r', d => d.size || 10)
.attr('fill', d => d.color || '#6C5CE7');
node.append('text')
.attr('dy', d => (d.size || 10) + 5)
.text(d => d.label.length > 10 ? d.label.substring(0, 10) + '...' : d.label);
node.on('mouseover', function(event, d) {
const tooltip = d3.select('.tooltip');
tooltip.style('display', 'block')
.style('left', (event.pageX + 10) + 'px')
.style('top', (event.pageY - 10) + 'px')
.html('<strong>' + d.label + '</strong><br>' +
(d.description || d.content || d.point_type || ''));
}).on('mouseout', function() {
d3.select('.tooltip').style('display', '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;
}
</script>
</body>
</html>