<body bgcolor="#CFC3A9">

<%@ page contentType="text/html; charset=gb2312" %> 
<%@ page language="java" %> 
<%@ page import="com.mysql.jdbc.Driver" %> 
<%@ page import="java.sql.*" %> 
<% 
out.print("<center><font color='#686789'>English WordCloud</font></center>"); 
String driverName="com.mysql.jdbc.Driver";  //驱动程序名 
String userName="root"; //数据库用户名 
String userPasswd="123456"; //密码
String dbName="english46";  //数据库名
String tableName="english"; //表名
//联结字符串 
String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd; 
                        Class.forName("com.mysql.jdbc.Driver").newInstance(); 
Connection connection=DriverManager.getConnection(url); 
Statement statement = connection.createStatement(); 
int[] count=new int[26];
for(int i=0;i<26;i++){
    int aa=Integer.valueOf('a')+i;
    char cha = (char) aa;
String sql="SELECT count(*) FROM "+tableName+" where english like '"+cha+"%' "+"order by english"; 
    ResultSet rs = statement.executeQuery(sql);  
    // 输出每一个数据值 
    while(rs.next()) { 
        count[i]=rs.getInt(1);
        
}
    rs.close();
}
statement.close(); 
connection.close(); 
%>
<script src="../d3.v7.min.js"></script>
<script src="../d3.layout.ruyicloud.js"></script>
        <script>
            var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

            var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
            w=w*0.98;
            h=h*0.95;
            var color=d3.schemeCategory10;
            var fill = d3.schemeCategory10;     
            var words=new Array(26);
            <% for (int i=0;i<26;i++){%>
words[<%=i%>]={text:String.fromCharCode(<%=65+i%>),size:<%=count[i]%>}
            <%}%>
         var wc=d3.layout.cloud()
                  .size([w, 400])
                  .words(words)
                  .padding(0)
           .rotate(function() { return ~~(Math.random() * 1) * 90; })
                  .font("Impact")
                  .fontSize(function(d) { return d.size/3+12; })
                  .on("end", draw)
                  .start();

          function draw(words) {
            d3.select("body").append("svg")
                .attr("width", w)
                .attr("height", 400)
              .append("g")
                .attr("transform", "translate("+w/2+",200)")
              .selectAll("text")
                .data(words)
              .enter()
              .append("a")
                .attr("xlint:href",function(d){ return "word.jsp?w="+d.text})
              .append("text")
                .style("font-size", function(d) { return d.size/3+12 + "px"; })
                .style("font-family", "Impact")
                .style("fill", function(d, i) { return fill[i%10]; })
                .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>
