Catmeow commited on
Commit
31b2a36
1 Parent(s): 3d9327b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +203 -23
index.html CHANGED
@@ -1,24 +1,204 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>
13
- You can modify this app directly by editing <i>index.html</i> in the
14
- Files and versions tab.
15
- </p>
16
- <p>
17
- Also don't forget to check the
18
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank"
19
- >Spaces documentation</a
20
- >.
21
- </p>
22
- </div>
23
- </body>
24
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+