Update index.html
Browse files- index.html +203 -23
index.html
CHANGED
@@ -1,24 +1,204 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
-
<
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
<!DOCTYPE html>
|
2 |
+
<meta charset="utf-8">
|
3 |
+
<style>.link { fill: none; stroke: #666; stroke-width: 1.5px;}#licensing { fill: green;}.link.licensing { stroke: green;}.link.resolved { stroke-dasharray: 0,2 1;}circle { fill: #ccc; stroke: #333; stroke-width: 1.5px;}text { font: 12px Microsoft YaHei; pointer-events: none; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;}.linetext { font-size: 12px Microsoft YaHei;}</style>
|
4 |
+
<body>
|
5 |
+
<script src="https://d3js.org/d3.v3.min.js"></script>
|
6 |
+
<script>
|
7 |
+
|
8 |
+
var links =
|
9 |
+
[
|
10 |
+
{source: '艾伦·麦席森·图灵', target: 'Alan Mathison Turing', 'rela': '外文名', type: 'resolved'},
|
11 |
+
{source: '艾伦·麦席森·图灵', target: '英国', 'rela': '国籍', type: 'resolved'},
|
12 |
+
{source: '艾伦·麦席森·图灵', target: '英国伦敦', 'rela': '出生地', type: 'resolved'},
|
13 |
+
{source: '艾伦·麦席森·图灵', target: '1912年6月23日', 'rela': '出生日期', type: 'resolved'},
|
14 |
+
{source: '艾伦·麦席森·图灵', target: '1954年6月7日', 'rela': '逝世日期', type: 'resolved'},
|
15 |
+
{source: '艾伦·麦席森·图灵', target: '数学家,逻辑学家,密码学家', 'rela': '职业', type: 'resolved'},
|
16 |
+
{source: '艾伦·麦席森·图灵', target: '剑桥大学国王学院,普林斯顿大学', 'rela': '毕业院校', type: 'resolved'},
|
17 |
+
{source: '艾伦·麦席森·图灵', target: '“计算机科学之父”', 'rela': '主要成就', type: 'resolved'},
|
18 |
+
{source: '艾伦·麦席森·图灵', target: '提出“图灵测试”概念', 'rela': '主要成就', type: 'resolved'},
|
19 |
+
{source: '艾伦·麦席森·图灵', target: '人工智能', 'rela': '主要成就', type: 'resolved'},
|
20 |
+
{source: '艾伦·麦席森·图灵', target: '破解德国的著名密码系统Enigma', 'rela': '主要成就', type: 'resolved'},
|
21 |
+
{source: '艾伦·麦席森·图灵', target: '《论数字计算在决断难题中的应用》', 'rela': '代表作品', type: 'resolved'},
|
22 |
+
{source: '艾伦·麦席森·图灵', target: '《机器能思考吗?》', 'rela': '代表作品', type: 'resolved'},
|
23 |
+
];
|
24 |
+
|
25 |
+
var nodes = {};
|
26 |
+
|
27 |
+
links.forEach(function(link)
|
28 |
+
{
|
29 |
+
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
|
30 |
+
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
|
31 |
+
});
|
32 |
+
|
33 |
+
var width = 1920, height = 1080;
|
34 |
+
|
35 |
+
var force = d3.layout.force()
|
36 |
+
.nodes(d3.values(nodes))
|
37 |
+
.links(links)
|
38 |
+
.size([width, height])
|
39 |
+
.linkDistance(180)
|
40 |
+
.charge(-1500)
|
41 |
+
.on("tick", tick)
|
42 |
+
.start();
|
43 |
+
|
44 |
+
var svg = d3.select("body").append("svg")
|
45 |
+
.attr("width", width)
|
46 |
+
.attr("height", height);
|
47 |
+
|
48 |
+
var marker=
|
49 |
+
svg.append("marker")
|
50 |
+
.attr("id", "resolved")
|
51 |
+
.attr("markerUnits","userSpaceOnUse")
|
52 |
+
.attr("viewBox", "0 -5 10 10")
|
53 |
+
.attr("refX",32)
|
54 |
+
.attr("refY", -1)
|
55 |
+
.attr("markerWidth", 12)
|
56 |
+
.attr("markerHeight", 12)
|
57 |
+
.attr("orient", "auto")
|
58 |
+
.attr("stroke-width",2)
|
59 |
+
.append("path")
|
60 |
+
.attr("d", "M0,-5L10,0L0,5")
|
61 |
+
.attr('fill','#000000');
|
62 |
+
|
63 |
+
var edges_line = svg.selectAll(".edgepath")
|
64 |
+
.data(force.links())
|
65 |
+
.enter()
|
66 |
+
.append("path")
|
67 |
+
.attr({
|
68 |
+
'd': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
|
69 |
+
'class':'edgepath',
|
70 |
+
'id':function(d,i) {return 'edgepath'+i;}})
|
71 |
+
.style("stroke",function(d){
|
72 |
+
var lineColor;
|
73 |
+
lineColor="#B43232";
|
74 |
+
return lineColor;
|
75 |
+
})
|
76 |
+
.style("pointer-events", "none")
|
77 |
+
.style("stroke-width",0.5)
|
78 |
+
.attr("marker-end", "url(#resolved)" );
|
79 |
+
|
80 |
+
var edges_text = svg.append("g").selectAll(".edgelabel")
|
81 |
+
.data(force.links())
|
82 |
+
.enter()
|
83 |
+
.append("text")
|
84 |
+
.style("pointer-events", "none")
|
85 |
+
.attr({ 'class':'edgelabel',
|
86 |
+
'id':function(d,i){return 'edgepath'+i;},
|
87 |
+
'dx':80,
|
88 |
+
'dy':0
|
89 |
+
});
|
90 |
+
|
91 |
+
edges_text.append('textPath')
|
92 |
+
.attr('xlink:href',function(d,i) {return '#edgepath'+i})
|
93 |
+
.style("pointer-events", "none")
|
94 |
+
.text(function(d){return d.rela;});
|
95 |
+
|
96 |
+
var circle = svg.append("g").selectAll("circle")
|
97 |
+
.data(force.nodes())
|
98 |
+
.enter().append("circle")
|
99 |
+
.style("fill",function(node){
|
100 |
+
var color;
|
101 |
+
var link=links[node.index];
|
102 |
+
color="#F9EBF9";
|
103 |
+
return color;
|
104 |
+
})
|
105 |
+
.style('stroke',function(node){
|
106 |
+
var color;
|
107 |
+
var link=links[node.index];
|
108 |
+
color="#A254A2";
|
109 |
+
return color;
|
110 |
+
})
|
111 |
+
.attr("r", 28)
|
112 |
+
.on("click",function(node)
|
113 |
+
{
|
114 |
+
edges_line.style("stroke-width",function(line){
|
115 |
+
console.log(line);
|
116 |
+
if(line.source.name==node.name || line.target.name==node.name){
|
117 |
+
return 4;
|
118 |
+
}else{
|
119 |
+
return 0.5;
|
120 |
+
}
|
121 |
+
});
|
122 |
+
})
|
123 |
+
.call(force.drag);
|
124 |
+
|
125 |
+
var text = svg.append("g").selectAll("text")
|
126 |
+
.data(force.nodes())
|
127 |
+
.enter()
|
128 |
+
.append("text")
|
129 |
+
.attr("dy", ".35em")
|
130 |
+
.attr("text-anchor", "middle")
|
131 |
+
.style('fill',function(node){
|
132 |
+
var color;
|
133 |
+
var link=links[node.index];
|
134 |
+
color="#A254A2";
|
135 |
+
return color;
|
136 |
+
}).attr('x',function(d){
|
137 |
+
var re_en = /[a-zA-Z]+/g;
|
138 |
+
if(d.name.match(re_en)){
|
139 |
+
d3.select(this).append('tspan')
|
140 |
+
.attr('x',0)
|
141 |
+
.attr('y',2)
|
142 |
+
.text(function(){return d.name;});
|
143 |
+
}
|
144 |
+
|
145 |
+
else if(d.name.length<=4){
|
146 |
+
d3.select(this).append('tspan')
|
147 |
+
.attr('x',0)
|
148 |
+
.attr('y',2)
|
149 |
+
.text(function(){return d.name;});
|
150 |
+
}else{
|
151 |
+
var top=d.name.substring(0,4);
|
152 |
+
var bot=d.name.substring(4,d.name.length);
|
153 |
+
|
154 |
+
d3.select(this).text(function(){return '';});
|
155 |
+
|
156 |
+
d3.select(this).append('tspan')
|
157 |
+
.attr('x',0)
|
158 |
+
.attr('y',-7)
|
159 |
+
.text(function(){return top;});
|
160 |
+
|
161 |
+
d3.select(this).append('tspan')
|
162 |
+
.attr('x',0)
|
163 |
+
.attr('y',10)
|
164 |
+
.text(function(){return bot;});
|
165 |
+
}
|
166 |
+
});
|
167 |
+
|
168 |
+
function tick() {
|
169 |
+
circle.attr("transform", transform1);
|
170 |
+
text.attr("transform", transform2);
|
171 |
+
|
172 |
+
edges_line.attr('d', function(d) {
|
173 |
+
var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
|
174 |
+
return path;
|
175 |
+
});
|
176 |
+
|
177 |
+
edges_text.attr('transform',function(d,i){
|
178 |
+
if (d.target.x<d.source.x){
|
179 |
+
bbox = this.getBBox();
|
180 |
+
rx = bbox.x+bbox.width/2;
|
181 |
+
ry = bbox.y+bbox.height/2;
|
182 |
+
return 'rotate(180 '+rx+' '+ry+')';
|
183 |
+
}
|
184 |
+
else {
|
185 |
+
return 'rotate(0)';
|
186 |
+
}
|
187 |
+
});
|
188 |
+
}
|
189 |
+
|
190 |
+
function linkArc(d) {
|
191 |
+
return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y
|
192 |
+
}
|
193 |
+
|
194 |
+
function transform1(d) {
|
195 |
+
return "translate(" + d.x + "," + d.y + ")";
|
196 |
+
}
|
197 |
+
function transform2(d) {
|
198 |
+
return "translate(" + (d.x) + "," + d.y + ")";
|
199 |
+
}
|
200 |
+
|
201 |
+
</script>
|
202 |
+
|
203 |
+
|
204 |
+
|