FrontEnd/Analyzing1.html at master · sdunlp/FrontEnd · GitHub

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
149
150
151
152
153
154
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>分析结果</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Free HTML5 Template by FREEHTML5" />
		<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
		<meta property="og:title" content="" />
		<meta property="og:image" content="" />
		<meta property="og:url" content="" />
		<meta property="og:site_name" content="" />
		<meta property="og:description" content="" />

		<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
		<link rel="shortcut icon" href="favicon.ico">

		<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300' rel='stylesheet' type='text/css'>
		<!-- Animate.css -->
		<link rel="stylesheet" href="css/animate.css">
		<!-- Icomoon Icon Fonts-->
		<link rel="stylesheet" href="css/icomoon.css">
		<!-- Bootstrap  -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<!-- Superfish -->
		<link rel="stylesheet" href="css/superfish.css">
		<link rel="stylesheet" href="css/style.css">

		<!-- Modernizr JS -->
		<script src="js/modernizr-2.6.2.min.js"></script>

		<script src="js/jquery.min.js"></script><!--可以没有jquery这个js-->
		<script src="js/d3.min.js"></script>
		<script src="js/d3.layout.cloud.js"></script>

		<!-- FOR IE9 below -->
		<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>
		<div style="height: 5em;"></div>
		<div class="col-sm-3" style="text-align: right;">
			<label style="font-family: '微软雅黑';text-align:right ;font-size: 1.5em;">搜索关键词</label>
		</div>
		<div class="col-sm-9">
			<p style="margin-top: 1%;">(Input the key words you want to search for)</p>
		</div>

		<form class="form-horizontal">
			<div class="form-group">
				<div class="col-sm-3"></div>
				<div class="col-sm-6">

					<script type="text/javascript">
						function submitBtnClick() {
							$('#search').submit();
						}
					</script>

					<!--这里是表单代码-->
					<form id="search" action="result.html" method="post">
						<input class="form-control" id="inputsearch" type="text" placeholder="输入关键词">
						<div class="col-sm-3">
						<button  class="btn btn-info"  value="submitsearch" style="font-family: '微软雅黑';font-size: 1.1em;" onclick="submitBtnClick()">搜索</button>
						</div>
					</form>
				</div>

			</div>

			<!--add the words cloud picture  | to show key words of files-->
			<div style="height: 500px;width: 85%;margin-top: 6%;margin-left: 8%;text-align: center" id="wordscloud"></div>

			<!--change width from 1600px to 85% | to suit different pc screen size-->
			<div style="height: 500px;width: 85%;margin-top: 6%;margin-left: 8%;" id="Scatter"></div>

		</form>

		<script src="js/jquery.min.js "></script>
		<!-- jQuery Easing -->
		<script src="js/jquery.easing.1.3.js "></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.min.js "></script>
		<!-- Waypoints -->
		<script src="js/jquery.waypoints.min.js "></script>
		<!-- Stellar -->
		<script src="js/jquery.stellar.min.js "></script>
		<!-- Superfish -->
		<script src="js/hoverIntent.js "></script>
		<script src="js/superfish.js "></script>
		<script src="js/bootstrap.fileinput.js "></script>
		<!-- Main JS (Do not remove) -->
		<script src="js/main.js "></script>
		<script src="js/diagrams/echarts.js"></script>
		<script src="js/diagrams/Scatter.js"></script>
		<script type="text/javascript">
            $.ajax({
                url: 'http://localhost/nlp_api/public/keywords',
                xhrFields: {
                    withCredentials: true
                },
                success:function (data) {
                    d3.layout.cloud().size([1000, 500]) //size([x,y])  词云显示的大小 只能以px为单位
                    //map 返回新的object数组
                        .words(data.map(function(d) {
                            return {"text": d.word, "size": 50 + d.frequency * 100};
                        }))
                        //~~的作用是单纯的去掉小数部分，不论正负都不会改变整数部分
                        //这里的作用是产生0 1
                        .rotate(function() { return ~~(Math.random() * 2) * 90; })
                        .font("Impact")
                        .fontSize(function(d) { return d.size; })
                        .on("end", draw)//结束时运行draw函数
                        .start();
                },
                error:function (request,status) {
                    alert("TODO 发生错误："+request.status);
                }
            });
            var fill = d3.scale.category20();

            //append()使用函数在指定元素的结尾添加内容
            //transform:translate(x,y)  定义2d旋转，即平移，向右平移x,向下平移y 也就是设置词云在画布中的相对位置
            function draw(words) {
                d3.select("#wordscloud").append("svg")
                    .attr("width", 1000)
                    .attr("height", 500)
                    .attr("style","border:1px solid red")
                    .append("g")
                    .attr("transform", "translate(480,280)")
                    .selectAll("text")
                    .data(words)
                    .enter().append("text")
                    .style("border","1px solid blue")
                    .style("font-size", function(d) { return d.size + "px"; })
                    .style("font-family", "Impact")
                    .style("fill", function(d, i) { return fill(i); })//fill 在前面15行定义为颜色集
                    .attr("text-anchor", "middle")
                    .attr("transform", function(d) {
                        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                    })
                    .text(function(d) { return d.text; });


            }
		</script>

	</body>

</html>