devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

可视化数据分析-基于JavaScript的d3实践学习_d3 javascript

作者：Monodyee | 2024-05-13 09:30:57

赞

踩

d3 javascript

目录

一.svg简介

二.D3简介

D3功能来源

常用语法说明

三.d3可视化访问MySQL数据库

实现方法

四.具体用例实现

svg绘制直方图

svg绘制二叉树（以电影票房为例）

D3进行数据可视化（链接数据库）

D3绘制直方图​

D3绘制饼图

D3绘制力导向图

​

D3绘制词云图

 

一.svg简介

SVG是什么

可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（Extensible Markup Language，XML ），用于描述二维矢量图形的一种图形格式，一般用在网页。

SVG创建工具

由于SVG是XML文件，SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape、Adobe Illustrator，更方便地创建SVG图像。

SVG使用方式

1. 浏览器直接打开

2. 在HTML中使用<img>标签引用

3. 直接在HTML中使用SVG标签

4. 作为CSS背景

SVG优点

1. 矢量的图形，不会失真任意伸缩。

2. 可被非常多的工具读取和修改（比如记事本）。

3. 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

4. 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。

浏览器支持

IE9+，Firefox，Chrome，Opera和Safar、iOS、Android3+ 都支持SVG。

 

二.D3简介

  D3.js 是一个基于数据的操作文档的 JavaScript 库，可以绑定任何数据到 ，支持 DIV 图案生成，也支持 SVG 图案的生成，D3提供了各种简单易用的函数，大大简化JS操作数据的难度，尤其在数据可视化方面，D3已将生成可视化的复杂步骤精简到了几个简单函数，只需输入几个简单数据，就可将数据转换绘制为各种基本图形。在操作过程中可以简单这样来解释：有一个存在若干个结点的选择区域，其中有若干个结点可以容纳数据，其结点和数据一一对应，在操作过程中实际上时将数据存放在节点中，这一过程称为绑定数据。

D3功能来源

直接引用d3.v3.js或其他d3版本文档。

常用语法说明

d3.select("body")
选择器：D3采用了一种声明式的方法，对任意节点集合的操作被称为选择。例如：

1

d3.select('#vis').append('div').style('top', '20px').style('left','20px');

selectAll("p")
选择DOM中的所有段落。由于没有存在，这将返回一个空的选择。这个选择为空，代表段落很快就会存在。

data(dataset)
计数和分析我们的数据值。如果dataset中有五个值，则之后我们的数据集将会执行5次，每个值一次。

enter()
要创建新的数据绑定的元素，需要使用enter() 。这个方法会在DOM中，然后被传递给它的数据。如果有更多的数据值比相应的DOM元素，然后进入（） 创建一个新的占位符元素，关闭的引用到这个新的占位符链中的下一个步骤。

append("p")
以占位符enter() 到DOM中插入一个p元素。

text("New paragraph!")
将新创建的p和插入一个文本值的参考。

function（）{return ；}

动态属性：D3 支持这种以 function 方式传入的属性，这样的属性是动态的，每次执行的时候再去调用计算获得：

1

2

3

d3.selectAll("p").style("color", function() {

  return "hsl(" + Math.random() * 360 + ",100%,50%)";

});

三.d3可视化访问MySQL数据库

实现方法

在html页面中嵌入Java代码，在tomcat的lib目录中引入mysql-connector-java-5.1.6-bin.jar包，编写Java代码取出数据库中相关数据，再在d3中进行可视化操作。

四.具体用例实现

 

svg绘制直方图

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width">
  7.   <title>直方图</title>
  8. </head>
  9. <body>
  10.     <svg id="mySVG" width="800" height="600" version="1.1"></svg>
  11. 	<script type="text/javascript">        
  12. 		var mysvg = document.getElementById("mySVG");
  13.         var rec= new Array();
  14.         var txt=new Array();
  15. 		for(var i=0;i<6;i++){
  16. 			rec[i] = document.createElement("rect");
  17.             txt[i] = document.createElement("text");
  18. 			mysvg.appendChild(rec[i]);
  19.             mysvg.appendChild(txt[i]);
  20.             var h=Math.random()*255;
  21.             var r=Math.floor(Math.random()*255);
  22.             var g=Math.floor(Math.random()*255);
  23.             var b=Math.floor(Math.random()*255);
  24. 			rec[i].outerHTML="<rect x="+(45*i)+" y="+(400-h)+" width=42 height="+h+" style='fill:rgb("+r+","+g+","+b+")'/>";
  25.             txt[i].outerHTML="<text x="+(10+45*i)+" y="+(400-h)+">"+Math.floor(h)+"</text>";
  26.         }
  27.   </script>
  28. </body>
  29. </html>

 

svg绘制二叉树（以电影票房为例）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>树形二叉树</title>	
  6. </head>
  7.  
  8. <body>
  9. <h1 align="center" fontsize=7>电影总票房排序文字二叉树-计科鲁俊丽-201811113010</h1>
  10. <svg id="svg01" width=800 height=600>
  11. </svg>
  12. <script>
  13.     var w = window.innerWidth
  14. || document.documentElement.clientWidth
  15. || document.body.clientWidth;
  16.  
  17.     var h = window.innerHeight
  18. || document.documentElement.clientHeight
  19. || document.body.clientHeight;
  20.     w=w*0.98;
  21.     h=h*0.9;
  22.  
  23. 	
  24.     var svg=document.getElementById("svg01");
  25.     svg.setAttribute("width",w);
  26.     svg.setAttribute("height",h);
  27.     
  28.     var x0=w/2;
  29. 	var y0=h;
  30. 	var rate=0.4*(0.5+Math.random()*0.5);
  31. 	
  32. 	var a=-Math.PI/2;
  33. 	var count=6;
  34. 	
  35. 	var str=["战狼2","哪吒之魔童降世","流浪地球","复仇者联盟4","终局之战","红海行动","美人鱼","唐人街探案2","我和我的祖国","我不是药神","中国机长","速度与激情8","西虹市首富","速度与激情7","捉妖记","复仇者联盟3：无限战争","捉妖记2","羞羞的铁拳","疯狂的外星人","海王","变形金刚4：绝迹重生","前任3：再见前任","毒液：致命守护者","功夫瑜伽","飞驰人生","侏罗纪世界2","寻龙诀","烈火英雄","西游伏妖篇","港囧",	"变形金刚5：最后的骑士","少年的你","疯狂动物城","魔兽","复仇者联盟2：奥创纪元","夏洛特烦恼","速度与激情：特别行动","芳华","侏罗纪世界","蜘蛛侠：英雄远征","头号玩家","后来的我们","一出好戏","阿凡达","摔跤吧！爸爸","扫毒2天地对决","人再囧途之泰囧","无双","西游降魔篇","美国队长3：英雄内战","碟中谍6：全面瓦解","寻梦环游记	","西游记之孙悟空三打白骨精","误杀","加勒比海盗5：死无对证","长城","湄公河行动","叶问4","心花路放金刚：骷髅岛煎饼侠","大黄蜂","极限特工：终极回归","澳门风云3","生化危机6：终章","攀登者","变形金刚3","西游记之大闹天宫","巨齿鲨","乘风破浪","神偷奶爸3","惊奇队长","盗墓笔记","功夫熊猫3","狂暴巨兽","奇幻森林","澳门风云2","西游记之大圣归来","泰坦尼克号3D版","比悲伤更悲伤的故事	","哥斯拉2：怪兽之王","老炮儿","超时空同居","绝地逃亡","阿丽塔：战斗天使","智取威虎山3D","十二生肖","智取威虎山","碟中谍5：神秘国度","银河补习班","冰雪奇缘2","星球大战：原力觉醒","蚁人2：黄蜂女现身","狮子王","从你的全世界路过","唐人街探案","叶问3","X战警：天启","反贪风暴4","无名之辈","北京遇上西雅图之不二情书，钢铁侠3","蜘蛛侠：英雄归来","霍比特人3：去而复归","大闹天竺","星际穿越","奇异博士","无问西东","天将雄师","神秘巨星","雷神3：诸神黄昏","猩球崛起：终极之战","金刚狼3：殊死一战","X战警：逆转未来","终结者：创世纪","美国队长2","西游记女儿国	","致我们终将逝去的青春","私人订制","猩球崛起2：黎明之战","熊出没·原始时代","画皮II","狼图腾","爸爸去哪儿","使徒行者2：谍影行动","铁道飞虎","环太平洋","悟空传","银河护卫队2","正义联盟	","鬼吹灯之九层妖塔","寒战2 宠爱","碟中谍4：幽灵协议","唐山大地震","蚁人","分手大师","摩天营救","让子弹飞","情圣","黑豹"];
  36.     var sign=["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"];
  37.  
  38. function show(x0,y0,rate,a,count)
  39. {
  40.     //var L=L*rate*(Math.random()*0.5+0.5);
  41. 	var aL=a-Math.PI/4*(Math.random()*0.5+0.5);
  42. 	var aR=a+Math.PI/4*(Math.random()*0.5+0.5);
  43.  
  44. 	var stri=str[0];
  45. 	for(var i=Math.pow(2,6-count)-1;i<Math.pow(2,7-count)-1;i++)
  46. 	{
  47. 		if(sign[i]=="1")
  48. 		{
  49. 			stri=str[i];
  50. 			sign[i]="0";
  51. 			i=Math.pow(2,7-count)-1;	
  52. 		}
  53. 	};
  54.    	var fontsize=count*6;
  55. 	var L=stri.length*fontsize;
  56. 	var x1=x0;
  57. 	var y1=y0;
  58. 	var x2=x1+L*Math.cos(a);
  59. 	var y2=y1+L*Math.sin(a);
  60. 	var words=document.createElement("text");
  61. 	svg.appendChild(words);
  62. 	words.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+(a*180)/Math.PI+","+x1+","+y1+")' fill='steelblue' font-size="+fontsize+">"+stri+"</text>"
  63.  
  64. 	if(count>0)
  65.     {
  66. 		show(x2,y2,rate,aL,count-1);
  67. 		show(x2,y2,rate,aR,count-1);
  68.  
  69. 		if(count==1)
  70. 		{
  71. 		var apple=document.createElement("circle");
  72. 		svg.appendChild(apple);
  73. 		apple.outerHTML="<circle cx="+x2+" cy="+y2+" r=4 fill='red'/>"
  74. 		}
  75.     }
  76. }
  77.  
  78. show(x0,y0,rate,a,count);
  79. </script>
  80. </body>
  81. </html>

D3进行数据可视化（链接数据库）

D3绘制直方图

  1. <html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body  charset="utf-8">
  7. <div id="wc"></div>
  8. <%@ page contentType="text/html; charset=gb2312" %> 
  9. <%@ page language="java" %> 
  10. <%@ page import="com.mysql.jdbc.Driver" %> 
  11. <%@ page import="java.sql.*" %> 
  12. <% 
  13.                          out.print("<center><h1><font color=steelblue>2021年影视剧全平台播放量统计直方图-5月24日数据</h1></center>"); 
  14. 						 out.print("<center><h2><font color=steelblue>来源：骨朵数据</h2></center>"); 
  15. 						//驱动程序名 
  16. 						String driverName="com.mysql.jdbc.Driver"; 
  17. 						//数据库用户名 
  18. 						String userName="root"; 
  19. 						//密码 
  20. 						String userPasswd="password"; 
  21. 						//数据库名 
  22. 						String dbName="engword"; 
  23. 						//表名 
  24. 						String tableName="episoderank"; 
  25. 						String tableName1="nodeluxun"; 
  26. 						String tableName2="edgesluxun";
  27. 						//联结字符串 
  28. 						
  29. 						Class.forName("com.mysql.jdbc.Driver").newInstance(); 
  30. 						Connection connection=DriverManager.getConnection("jdbc:mysql://localhost:3306/engword?useUnicode=true&characterEncoding=utf8&useSSL=false","root","password"); 
  31. 						Statement statement = connection.createStatement(); 
  32.  
  33. 						float charcount[]=new float[40];
  34.                         String occu[]=new String[40];
  35. 						for(int i=1;i<41;i++){		
  36. 							String sql="SELECT * FROM "+tableName+" where id = '"+i+"'"; 
  37. 							
  38. 							String str="  ";
  39. 							float per=1;
  40. 							ResultSet rs = statement.executeQuery(sql);
  41. 							while(rs.next())
  42. 							{
  43. 								str=rs.getString(2);
  44. 							   per=rs.getFloat(3);
  45. 							  // out.print(per);
  46. 							   //out.print(str);
  47. 							}
  48. 							charcount[i-1]=per;
  49. 							occu[i-1]=str;
  50.                             rs.close();								
  51. 						}
  52. 						
  53. 						
  54. 						
  55. 			  String name[]=new String[20];
  56. 						String image[]=new String[20];
  57. 						String intro[]=new String[20];
  58. 					    int source[]=new int[20];
  59. 						int target[]=new int[20];
  60. 						String relation[]=new String[20];
  61. 						
  62. 						for(int i=1;i<21;i++){		
  63. 							String sql="SELECT * FROM "+tableName1+" where id = '"+i+"'"; 
  64. 							
  65. 							String str="  ";
  66. 			                String str1=" ";
  67. 							String str2=" ";
  68. 							ResultSet rs = statement.executeQuery(sql);
  69. 							while(rs.next())
  70. 							{
  71. 								str=rs.getString(2);
  72. 			                    str1=rs.getString(3);
  73. 								str2=rs.getString(4);
  74. 							 
  75. 							}
  76. 							
  77. 							name[i-1]=str;
  78. 							image[i-1]=str1;
  79. 							intro[i-1]=str2;
  80.                             rs.close();								
  81. 						}
  82. 						
  83. 						
  84. 						for(int i=1;i<21;i++){		
  85. 							String sql1="SELECT * FROM "+tableName2+" where id = '"+i+"'"; 
  86. 							
  87. 							int nums=0;
  88. 			                int numt=0;
  89. 							String str2=" ";
  90. 							ResultSet rs = statement.executeQuery(sql1);
  91. 							while(rs.next())
  92. 							{
  93. 								nums=rs.getInt(2);
  94. 			                    numt=rs.getInt(3);
  95. 								str2=rs.getString(4);
  96. 							
  97. 							}
  98. 							
  99. 							source[i-1]=nums;
  100. 							target[i-1]=numt;
  101. 							relation[i-1]=str2;
  102.                             rs.close();								
  103. 						}
  104. 			 
  105. 						statement.close(); 
  106. 						connection.close(); 
  107. %>
  108.   
  109.    <script src="d3.v4.js"></script>
  110. 	<script src="d3.layout.cloud.js"></script>
  111. 	
  112. 		<script>
  113. 	
  114. 		var color = d3.scaleOrdinal(d3.schemeCategory10);
  115. 		    var w=window.innerWidth;
  116.  
  117. 			var h=window.innerHeight;
  118. 			w=w;
  119. 			h=h*2.5;
  120. 			
  121. 			/*-----------------------------------------------直方图------------------------------------------------------*/
  122. //var color=d3.scale.category10();
  123. 			var dataset=new Array(14);
  124. 			//var dataAlphabet=new Array(14);
  125. 			var occupation=new Array(14);
  126. 			
  127. 			<%
  128. 			for (int i=0;i<14;i++){
  129. 			%>
  130. 				//dataset[i]=Math.floor(Math.random()*500);
  131. 				dataset[<%=i%>]=<%=charcount[i]%>;   //js的代码
  132. 				
  133. 				occupation[<%=i%>]='<%=occu[i]%>';
  134. 				
  135. 				<% }%>
  136. 			
  137. 			var ww=w/dataset.length;
  138. 			var svg=d3.select("body")
  139. 			          .append("svg")
  140. 					  .attr("width",w)
  141. 					  .attr("height",h);
  142. 			var rect=svg.selectAll("rect")
  143. 			            .data(dataset)
  144. 				        .enter()
  145. 			            .append("rect")
  146.                           .attr("x",function(d,i){return 120+i*w*0.85/dataset.length})
  147. 						  .attr("y",function(d){return 0.4*h-d*10})
  148. 						  .attr("width",ww*0.7)
  149. 						  .attr("height",function(d){return d*10})
  150. 						  .attr("fill",function(d,i){return "steelblue"});
  151. 						  
  152. 			var rect=svg.selectAll("text")
  153. 			            .data(dataset)
  154. 				        .enter()
  155. 			            .append("text")
  156.                           .attr("x",function(d,i){return 100+i*w*0.85/dataset.length})
  157. 						  .attr("y",function(d){return 0.4*h-10*d+8})
  158.                           .text(function(d){return d+"亿"})
  159. 						  .attr("dx",ww/2)
  160. 						  .attr("dy","-1em")
  161. 						  .attr("text-anchor","middle")
  162. 						  .attr("font-size",15)
  163.                           .attr("fill",'black');			
  164.             				  
  165. 					  
  166. 			var rectA=svg.selectAll("text1")
  167. 			            .data(occupation)
  168. 				        .enter()
  169. 			            .append("text")
  170. 						
  171.                           .attr("x",function(d,i){return 100+i*w*0.85/occupation.length})
  172. 						  .attr("y",function(d){return 0.4*h+23})
  173. 						  .attr("font-size",15)
  174.                           .text(function(d){return d})
  175. 						  .attr("dx",ww/2)
  176. 						  .attr("dy","-1em")
  177. 						  .attr("text-anchor","middle")
  178. 						  .attr("font-size",10)
  179.                           .attr("fill","black");	
  180. 						  
  181. 						  
  182. 						  
  183. 			</script>
  184.  
  185. 	</body>
  186. </html>

D3绘制饼图

  1. <html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3.  
  4. <body  charset="utf-8">
  5. <div id="wc"></div>
  6. <%@ page contentType="text/html; charset=utf-8" %> 
  7. <%@ page language="java" %> 
  8. <%@ page import="com.mysql.jdbc.Driver" %> 
  9. <%@ page import="java.sql.*" %> 
  10. <% 
  11.                          out.print("<center><h1><font color=steelblue>2021年影视剧全平台播放量统计-5月24日数据</h1></center>"); 
  12. 						 out.print("<center><h2><font color=steelblue>来源：骨朵数据</h2></center>"); 
  13. 						//驱动程序名 
  14. 						String driverName="com.mysql.jdbc.Driver"; 
  15. 						//数据库用户名 
  16. 						String userName="root"; 
  17. 						//密码 
  18. 						String userPasswd="password"; 
  19. 						//数据库名 
  20. 						String dbName="engword"; 
  21. 						//表名 
  22. 						String tableName="episoderank"; 
  23. 						
  24. 						
  25. 						Class.forName("com.mysql.jdbc.Driver").newInstance(); 
  26. 						Connection connection=DriverManager.getConnection("jdbc:mysql://localhost:3306/engword?useUnicode=true&characterEncoding=utf8&useSSL=false","root","password"); 
  27. 						Statement statement = connection.createStatement(); 
  28.  
  29. 						float charcount[]=new float[40];
  30.                         String occu[]=new String[40];
  31. 						for(int i=1;i<41;i++){		
  32. 							String sql="SELECT * FROM "+tableName+" where id = '"+i+"'"; 
  33. 							
  34. 							String str="  ";
  35. 							float per=1;
  36. 							ResultSet rs = statement.executeQuery(sql);
  37. 							while(rs.next())
  38. 							{
  39. 								str=rs.getString(2);
  40. 							   per=rs.getFloat(3);
  41. 							  // out.print(per);
  42. 							   //out.print(str);
  43. 							}
  44. 							charcount[i-1]=per;
  45. 							occu[i-1]=str;
  46.                             rs.close();								
  47. 						}
  48. 						
  49. 			
  50. 						statement.close(); 
  51. 						connection.close(); 
  52. %>
  53.  
  54. 	
  55. <script src="d3.v4.js" charset="utf-8"></script> 
  56.         <script>
  57. 			var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
  58. 			var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
  59. 			var width = w*0.98;
  60. 			var height =h*0.96;
  61. 			
  62. 			var dataset=new Array(14);			  
  63. 			var total=0;
  64. 			<%
  65. 			for (int i=0;i<14;i++){
  66. 			%>
  67.              dataset[<%=i%>]=['<%=occu[i]%>',<%=charcount[i]%>];	
  68. 			// total+=dataset1[<%=i%>][1];
  69. 			<% }%>
  70. 			//转化数据为适合生成饼图的对象数组		
  71. 			var pie = d3.pie()
  72. 						.value(function(d){return d[1];});
  73. 			
  74. 			innerRadius = 50;//圆环内半径
  75. 			
  76. 			var arc=d3.arc()//设置弧度的内外半径，等待传入的数据生成弧度
  77. 				.innerRadius(innerRadius)
  78. 				.outerRadius(function (d) {
  79. 					var value=d.value;
  80. 					return value*5+ innerRadius;
  81. 				});		
  82.  
  83. 			var svg=d3.select("body")
  84. 					.append("svg")
  85. 					.attr("width",width)
  86. 					.attr("height",height);
  87.  
  88. 			var color = d3.scaleOrdinal(d3.schemeCategory20c);
  89. 			
  90. 			//准备分组,把每个分组移到图表中心
  91. 			var arcs=svg.selectAll("g")
  92. 				.data(pie(dataset))
  93. 				.enter()
  94. 				.append("g")
  95. 				//移到图表中心
  96. 				.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");//translate(a,b)a表示横坐标起点，b表示纵坐标起点
  97.  
  98. 			//为组中每个元素绘制弧形路路径
  99. 			arcs.append("path")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
  100. 				.attr("fill",function(d,i){//填充颜色
  101. 					return color(i);
  102. 				})
  103. 				.attr("d",arc)//将角度转为弧度（d3使用弧度绘制
  104. 				.on('mouseover',function(d,i){
  105. 					d3.select(this)
  106. 					.attr("fill", d3.rgb(color(i)).brighter());	
  107. 					svg.append("text")
  108. 					   .attr("id","info")
  109. 					   .attr("x",width/2)
  110. 					   .attr("y",height/2)
  111. 					   .attr("text-anchor","middle")
  112. 					   .attr("font-size",20)
  113. 					   .text(d.data[0]);
  114. 					svg.append("text")
  115. 					   .attr("id","value")
  116. 					   .attr("x",width/2)
  117. 					   .attr("y",height/2+24)
  118. 					   .attr("text-anchor","middle")
  119. 					   .attr("font-size",20)
  120. 					   .text(d.value+"亿");
  121. 				})
  122. 				.on('mouseout',function(d,i){
  123. 					d3.select(this)
  124. 					.attr("fill",color(i));	
  125. 					d3.select("#info")
  126. 					.remove();
  127. 					d3.select("#value")
  128. 					.remove();
  129. 				});
  130. 				
  131. 			arcs.append("text")
  132. 				.attr("transform",function(d){
  133. 					var x = arc.centroid(d)[0];
  134. 					var y = arc.centroid(d)[1];
  135. 					return "translate(" + x + "," + y + ")";
  136. 				})
  137. 				.attr("text-anchor","middle")
  138. 				.attr("font-size",function(d) { 
  139. 					return d.data[1]*0.8 + "px"; 
  140. 				})
  141. 				.text(function(d){				
  142. 					return d.value;
  143. 				});
  144.         </script>
  145. 	
  146. 	</body>
  147. </html>

 

D3绘制力导向图

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <meta  meta charset="utf-8">
  5. <h1 align="center"><font color=black > 影视剧觉醒年代人物鲁迅关系图</h1>
  6.  
  7. <h2  align="right">
  8. 来源：北京鲁迅博物馆
  9. </h2>
  10. <style>
  11. 			path{
  12. 			  fill: none;
  13. 			  stroke: #666;
  14. 			  stroke-width: 1.5px;
  15. 			}
  16. 			circle {
  17. 			  stroke: #333;
  18. 			  stroke-width: 1.5px;
  19. 			}
  20. 			text {
  21. 			  font: 10px sans-serif;
  22. 			  pointer-events: none;
  23. 			}
  24. 			.tooltip{  
  25. 				position: absolute;  
  26. 				width: 340px;  
  27. 				height: auto;  
  28. 				font-family: simsun;  
  29. 				font-size: 10px;
  30. 				text-align: left;  
  31. 				color: black;  
  32. 				border-width: 1px solid black;  
  33. 				background-color: 7FFF00;  
  34. 				border-radius: 3px;  
  35. 			}  
  36. 			.tooltip:after{   
  37. 				content: '';  
  38. 				position: absolute;  
  39. 				bottom: 100%;  
  40. 				left: 20%;  
  41. 				margin-left: -3px;  
  42. 				width: 0;  
  43. 				height: 0;  
  44. 				border-bottom: 12px solid black;  
  45. 				border-right: 12px solid transparent;  
  46. 				border-left: 12px solid transparent;  
  47. 			}  
  48.      	</style>  
  49. </head>
  50.  
  51. <body style=" opacity:1">
  52.  
  53.  
  54.  
  55. <div id="wc"></div>
  56. <%@ page contentType="text/html; charset=gb2312" %> 
  57. <%@ page language="java" %> 
  58. <%@ page import="com.mysql.jdbc.Driver" %> 
  59. <%@ page import="java.sql.*" %> 
  60. <% 
  61.         //驱动程序名 
  62. 						String driverName="com.mysql.jdbc.Driver"; 
  63. 						//数据库用户名 
  64. 						String userName="root"; 
  65. 						//密码 
  66. 						String userPasswd="password"; 
  67. 						//数据库名 
  68. 						String dbName="engword"; 
  69. 						//表名 
  70. 						//表名 
  71. 						String tableName1="nodeluxun"; 
  72. 						String tableName2="edgesluxun";
  73. 							
  74. 						Class.forName("com.mysql.jdbc.Driver").newInstance(); 
  75. 						Connection connection=DriverManager.getConnection("jdbc:mysql://localhost:3306/engword?useUnicode=true&characterEncoding=utf8&useSSL=false","root","password"); 
  76. 						Statement statement = connection.createStatement(); 
  77. 						
  78. 						//float charcount[]=new float[20];
  79.                         String name[]=new String[20];
  80. 						String image[]=new String[20];
  81. 						String intro[]=new String[20];
  82. 					    int source[]=new int[20];
  83. 						int target[]=new int[20];
  84. 						String relation[]=new String[20];
  85. 						
  86. 						for(int i=1;i<21;i++){		
  87. 							String sql="SELECT * FROM "+tableName1+" where id = '"+i+"'"; 
  88. 							
  89. 							String str="  ";
  90. 			                String str1=" ";
  91. 							String str2=" ";
  92. 							ResultSet rs = statement.executeQuery(sql);
  93. 							while(rs.next())
  94. 							{
  95. 								str=rs.getString(2);
  96. 			                    str1=rs.getString(3);
  97. 								str2=rs.getString(4);
  98. 							  // out.print(per);
  99. 							//   out.print(str);
  100. 							}
  101. 							
  102. 							name[i-1]=str;
  103. 							image[i-1]=str1;
  104. 							intro[i-1]=str2;
  105. 							
  106. 						
  107. 						//	out.print(name[i-1]);
  108.                             rs.close();								
  109. 						}
  110. 						
  111. 						
  112. 						for(int i=1;i<21;i++){		
  113. 							String sql1="SELECT * FROM "+tableName2+" where id = '"+i+"'"; 
  114. 							
  115. 							int nums=0;
  116. 			                int numt=0;
  117. 							String str2=" ";
  118. 							ResultSet rs = statement.executeQuery(sql1);
  119. 							while(rs.next())
  120. 							{
  121. 								nums=rs.getInt(2);
  122. 			                    numt=rs.getInt(3);
  123. 								str2=rs.getString(4);
  124. 							 //   out.print(str2);
  125. 							}
  126. 							
  127. 							source[i-1]=nums;
  128. 							target[i-1]=numt;
  129. 							relation[i-1]=str2;
  130. 							
  131. 						
  132. 						//	out.print(name[i-1]);
  133.                             rs.close();								
  134. 						}
  135. 			 
  136. 						statement.close(); 
  137. 						connection.close(); 
  138. 						
  139. 						
  140. %>
  141. <script  src="https://d3js.org/d3.v3.min.js"></script>
  142. 		<script type="text/javascript">
  143. 		var  width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
  144. 		var  height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
  145. 		var  img_h=50;
  146. 		var  img_w=50;
  147. 		var  radius=10;
  148. 		var svg=d3.select("body")  
  149.                 .append("svg")  
  150.                 .attr("width",width)  
  151.                 .attr("height",height); 	
  152. 		
  153. 			
  154. 		    var nodes=new Array(20);			  
  155. 			<%
  156. 			for (int i=0;i<20;i++){
  157. 			%>
  158.              nodes[<%=i%>]={name:"<%=name[i]%>",image:"<%=image[i]%>",intro:"<%=intro[i]%>"};	
  159. 			// total+=dataset1[<%=i%>][1];
  160. 			<% }%>	
  161. 				
  162.             var edges=new Array(20);			  
  163. 			<%
  164. 			for (int i=0;i<20;i++){
  165. 			%>
  166.              edges[<%=i%>]={source:<%=source[i]%>,target:<%=target[i]%>,relation:"<%=relation[i]%>"};	
  167. 			// total+=dataset1[<%=i%>][1];
  168. 			<% }%>	
  169. 			
  170. 			var force=d3.layout.force()
  171.                 .nodes(nodes)
  172. 				.links(edges)
  173. 				.size([width,height])
  174. 				.linkDistance(150)
  175. 				.charge(-1200)
  176.                 .start();	
  177.         //提示框部分
  178. 		var tooltip=d3.selectAll("body")  
  179.                     .append("div")  
  180.                     .attr("class","tooltip")  
  181.                     .style("opacity",0.0); 
  182.  
  183.        //箭头绘制	
  184. 		var defs = svg.append("defs");
  185. 		var radius=10;
  186. 		var arrowMarker = defs.append("marker")
  187. 								.attr("id","arrow")
  188. 								.attr("markerUnits","strokeWidth")
  189. 								.attr("markerWidth","4")
  190. 								.attr("markerHeight","4")
  191. 								.attr("viewBox","0 0 4 4")
  192. 								.attr("refX",20+radius/8-2)   //实际是radius/strokeWidth
  193. 								.attr("refY",2)
  194. 								.attr("orient","auto");
  195.  
  196. 		var arrow_path = "M0,1 L4,2 L0,3 L0,0";
  197.  
  198. 		arrowMarker.append("path")
  199. 					.attr("d",arrow_path); 					
  200. 		var color=d3.scale.category20();
  201. 		var path = svg.selectAll("path")
  202. 								  .data(edges)
  203. 								  .enter()
  204. 								  .append("path")
  205. 								  .attr("id", function(d,i) {
  206. 									   return "edgepath" +i;
  207. 								  })
  208. 								  .attr("class","edges")
  209. 								  .attr("marker-end","url(#arrow)");		
  210. 		var pathtext = svg.selectAll('.pathText')
  211. 				  .data(edges)
  212. 				  .enter()
  213. 				  .append("text")
  214. 				  .attr("class","pathText")
  215. 				  .append('textPath')
  216. 				  .attr("text-anchor", "middle")//居中
  217. 				  .attr("startOffset","50%")
  218. 				  .attr('xlink:href', function(d,i) { return "#edgepath" + i; })
  219. 				  .text(function(d) { return d.relation; });						  
  220. 		var  img_h=50;
  221. 		var  img_w=50;
  222. 		var  radius=23;								
  223. 		var  circles=svg.selectAll("forceCircle")
  224. 	               .data(nodes)
  225. 				   .enter()
  226. 				   .append("circle")
  227. 				   .attr("class","forceCircle")
  228. 				   .attr("r",radius)
  229. 				   .style("stroke","DarkGray")
  230. 				   .style("stroke-width","1.0px")
  231. 				   .attr("fill", function(d, i){
  232.                                     //创建圆形图片
  233.                                     var defs = svg.append("defs").attr("id", "imgdefs");
  234.                                     var catpattern = defs.append("pattern")
  235.                                                          .attr("id", "catpattern" + i)
  236.                                                          .attr("height", 1)
  237.                                                          .attr("width", 1);
  238.                                     catpattern.append("image")
  239.                                             .attr("x", - (img_w / 2 - radius+5.8))
  240.                                             .attr("y", - (img_h / 2 - radius+3.5))
  241.                                             .attr("width", img_w+11)
  242.                                             .attr("height", img_h+6)
  243.                                             .attr("xlink:href","image/"+d.image);
  244.                                     return "url(#catpattern" + i + ")";
  245.                     })
  246. 					.on("mouseover",function(d,i){    //加入提示框
  247.                         tooltip.html("角色简介："+d.intro)
  248.                                .style("left",(d3.event.pageX)+"px")  
  249.                                .style("top",(d3.event.pageY+20)+"px")  
  250.                                .style("opacity",1.0);  
  251. 					})
  252. 					.on("mousemove",function(d){            
  253.                           tooltip.style("left",(d3.event.pageX)+"px")  
  254.                                  .style("top",(d3.event.pageY+20)+"px"); })           
  255.                    .on("mouseout",function(d){  
  256.                         tooltip.style("opacity",0.0); })
  257. 				   .call(force.drag);  
  258. 				   
  259. 	    var texts=svg.selectAll(".forceText")
  260.                  .data(nodes)
  261. 				 .enter()
  262. 				 .append("text")
  263. 				 .attr("class","forceText")
  264. 				 .attr("x",function(d){return d.x;})
  265. 				 .attr("y",function(d){return d.y;})
  266. 				 .style("stroke", "#2F4F4F")
  267.                  .attr("dx","-1.5em")
  268. 				 .attr("dy","3em")
  269. 				 .text(function(d){return d.name;});
  270. 				 	
  271. 		force.on("tick",function(){
  272. 		      path.attr("d", function(d) {
  273. 					var dx = d.target.x - d.source.x;//增量
  274. 					var	dy = d.target.y - d.source.y;
  275. 					return "M" + d.source.x + ","+ d.source.y + "L" + d.target.x + "," + d.target.y;
  276. 				  });
  277. 			  circles.attr("cx",function(d){return d.x;});
  278. 			  circles.attr("cy",function(d){return d.y;});
  279. 			  texts.attr("x",function(d){return d.x;});
  280. 			  texts.attr("y",function(d){return d.y;});
  281. 		});
  282. 		</script>
  283. 	
  284. </body>

D3绘制词云图

  1. <html>
  2. <meta charset=utf-8>
  3. <body>
  4. <div id="wc"></div>
  5. <%@ page contentType="text/html; charset=utf-8" %> 
  6. <%@ page language="java" %> 
  7. <%@ page import="com.mysql.jdbc.Driver" %> 
  8. <%@ page import="java.sql.*" %> 
  9. <% 
  10.                         out.print("<center><h1><font color=steelblue>词云图</h1></center>"); 
  11. 						//驱动程序名 
  12. 						String driverName="com.mysql.jdbc.Driver"; 
  13. 						//数据库用户名 
  14. 						String userName="root"; 
  15. 						//密码 
  16. 						String userPasswd="password"; 
  17. 						//数据库名 
  18. 						String dbName="engword"; 
  19. 						//表名 
  20. 						String tableName="episoderank"; 
  21. 						//联结字符串 
  22. 						
  23. 						Class.forName("com.mysql.jdbc.Driver").newInstance(); 
  24. 						Connection connection=DriverManager.getConnection("jdbc:mysql://localhost:3306/engword?useUnicode=true&characterEncoding=utf8&useSSL=false","root","password"); 
  25. 						Statement statement = connection.createStatement(); 
  26.  
  27.                         String name[]=new String[100];
  28.                         float rate[]=new float[100];
  29.                        // int count[] = new int[26];
  30. 						for(int i=0;i<45;i++){
  31. 							
  32.  
  33. 							//String sql="SELECT * FROM "+tableName+" where english like 'a%' "+"order by english"; 
  34. 							String sql="SELECT * FROM "+tableName+" where id = "+(i+1)+" "; 
  35. 							ResultSet rs = statement.executeQuery(sql);  
  36. 							// 输出每一个数据值 
  37. 							
  38. 							float per=0;
  39. 							String na="";
  40. 							while(rs.next()) { 
  41. 								per=rs.getFloat(3);
  42. 								na=rs.getString(2);
  43. 							}
  44. 							name[i]=na;
  45. 							rate[i]=per;
  46. 							//count[i]=j;
  47. 							//out.print(" "+j+" <br>"); 
  48. 							rs.close();
  49. 						}
  50. 						
  51. 						statement.close(); 
  52. 						connection.close(); 
  53. 						%>
  54. 		<script src="d3.v4.js" charset="utf-8"></script> 
  55. 		<script src="d3.layout.cloud.js"></script>
  56.  
  57. 		<script>
  58. 	color = d3.scaleOrdinal(d3.schemeCategory10);
  59. 			var w = window.innerWidth
  60. 			|| document.documentElement.clientWidth
  61. 			|| document.body.clientWidth;
  62.  
  63. 			var h = window.innerHeight
  64. 			|| document.documentElement.clientHeight
  65. 			|| document.body.clientHeight;
  66. 			var width = w * 0.98;
  67. 			var height = h * 0.9;	
  68.  
  69. 			var words = new Array(45);
  70. 			<%
  71. 				for(int i=0;i<45;i++)
  72. 				{%>					
  73. 					words[<%=i%>]={name:"<%=name[i]%>",size:<%=rate[i]%>};
  74. 				<%}
  75. 			%>
  76. 		var wc=d3.layout.cloud()
  77. 				  .size([w, h])
  78. 				  .words(words)
  79. 				  .padding(5)
  80. 				  .rotate(function() { return ~~(Math.random() * 2) * 90; })
  81. 				  .font("Impact")
  82. 				  .fontSize(function(d) { return d.size; })
  83. 				  .on("end", draw)
  84. 				  .start();
  85.  
  86. 		  function draw(words) {
  87. 			d3.select("body").append("svg")
  88. 				.attr("width", w)
  89. 				.attr("height", h)
  90. 			  .append("g")
  91. 				.attr("transform", "translate(300,200)")
  92. 			  .selectAll("text")
  93. 				.data(words)
  94. 			  .enter().append("text")
  95. 				.style("font-size", function(d) { return d.size+"px"; })
  96. 				.style("font-family", "Impact")
  97. 				.style("fill",function(d,i){return color(i);})
  98. 				.attr("text-anchor", "middle")
  99. 				.attr("transform", function(d) {
  100. 				  return "translate(" + [d.x+w/4, d.y+h/4] + ")rotate(" + d.rotate + ")";
  101. 				})
  102. 				.text(function(d) { return d.name; });
  103. 		  }
  104. 		  
  105. 		 
  106. 		</script>
  107. </body>
  108. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/562984
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号