数据可视化课程整理与心得（1）

零、tomcat前端

1.下载tomcat→https://tomcat.apache.org/

2.启动组件

默认路径C:\Program Files\Apache Software Foundation\Tomcat 10.0\bin

网页文件一般在webapps文件夹里，可以用Notepad++进行编写，编写完后可以在浏览器上输入本机地址/文件名/html文件名看出成果，比如我的一个作业是 http://127.0.0.1:8080/dataviz2021/graph.html
dataviz2021是webapps下我创建的文件夹，对graph.html进行代码编写。

后面还会有更好用的前后端工具。

一、基于D3的直方图、饼图的绘制（施工）

二、基本力导向与基于Path的力导向（施工）

三、 基于D3的词云图

1.D3.JS词云图

https://www.jasondavies.com/wordcloud/

2.必要准备：下载d3.layout.cloud.js包

下载地址：link
包在build文件里，用的时候将其复制粘贴在网页文档同文件夹下。

在进行代码编写的时候必须先加载本地d3.v3.min.js包，然后加载d3.layout.cloud.js包。
如果前者是以网络形式加载的↓

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

这种情况下再加载本地d3.layout.cloud.js包会报错
正确写法↓

	<script src="d3.v3.min.js" charset="utf-8"></script>
	<script src="d3.layout.cloud.js"></script>

也可以两个都网络形式挂载，但好像要科学上网，而且会比较慢。

3.词云图布局

var wc=d3.layout.cloud()
				  .size([1000, 600])
				  .words(words)
				  .padding(5)
				  .rotate(function() { return ~~(Math.random() * 2) * 90; })
				  .font("Impact")
				  .fontSize(function(d) { return d.size; })
				  .on("end", draw)
				  .start();

各配置项的信息可以看→link.

function draw(words) {
			d3.select("body").append("svg")
				.attr("width", 1000)
				.attr("height",500)
			  .append("g")
				.attr("transform", "translate(300,200)")
			  .selectAll("text")
				.data(words)
			  .enter().append("text")
				.style("font-size", function(d) { return d.size + "px"; })
				.style("font-family", "Impact")
				.style("fill", function(d, i) { return fill(i); })
				.attr("text-anchor", "middle")
				.attr("transform", function(d) {
				  return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
				})
				.text(function(d) { return d.text; });
		  }

四、 地图可视化

1.GeoJSON

GeoJSON：将JSON的格式应用于地理上的文件

地图一定要注意政治因素，敏感地区与主权相关问题一定要谨慎！！！

原理是球形墨卡托投影，这个亚子↓
https://hujiulong.github.io/what-is-the-mercator-projection/

2.地图载入

基于原理首先要对地图进行投影

//定义地图的投影
			var projection = d3.geo.mercator()
								   .center([107, 36])
								   .scale(5000)
								   .translate([width/2, height/2]);//定义地形路径生成器
			var path = d3.geo.path()
						 .projection(projection);	//设定投影

以中国地图为例，请求china.geojson

//请求china.geojson
			d3.json("China.geojson", function(error, root) {
				if (error) 
					return console.error(error);
				console.log(root);

				var groups = svg.append("g");
					
				groups.selectAll("path")
						.data(root.features)
						.enter()
						.append("path")
						.attr("class","province")//划分好省界线
						.style("fill", function(d,i){
							return color(i);//五颜六色
						})
						.attr("d", path );	//使用路径生成器
					
			});

其中省界线的设置在style中

.province {
				stroke: black;
				stroke-width: 1px;
			}

绘制中国地图相关的可视化一定不要忘记南海！！！

//请求southchinasea.svg
			d3.xml("southchinasea.svg", function(error, xmlDocument) {
				svg.html(function(d){
					return d3.select(this).html() + xmlDocument.getElementsByTagName("g")[0].outerHTML;
				});			
				d3.select("#southchinasea")
					.attr("transform","translate(840,380)scale(0.5)")
					.attr("class","southchinasea");
			});

可以在style中对南海地区的svg进行修改，

.southchinasea {
				stroke: black;//绘点颜色
				stroke-width: 1px;//绘点大小
				fill: #F0FFFF;//阴影部分的颜色
			}

3.润色

比如可以把地名标注上

var texts = svg.selectAll(".texts")															
								.data(root.features)								
								.enter()
								.append("text")
								.attr("class", "texts")	
								.text(function(d){return d.properties.name;})
								.attr("transform", function(d) {
									var centroid = path.centroid(d),
										x = centroid[0],
										y = centroid[1];
								    if((d.properties.name=="河北")||(d.properties.name=="澳门")||(d.properties.name=="安徽"))//边界冲突的美化处理
											y=y+25;
									return "translate(" + x + ", " + y + ")";
								})
								.attr('fill','green')
								.attr("font-size","12px");
			});		

同样可以导入其他geojson进行d3可视化，添加配色和交互。

五、交互与动画

1.提示框

var tooltip = d3.select("body")
				.append("div")
			    .attr("class","tooltip")
				.style("opacity",0.0);

需要在style里定义好tooltip的形式

<style>
			 .tooltip{
				 font-family: simsun; 
				 font-size: 14px;
				 width: 120;
				 height: auto;
				 position: absolute;
				 text-align: center;
				 border-style: solid; 
				 border-width: 1px;
				 background-color: white;
				 border-radius: 5px;
			  }
		</style>

可以结合互动套入.on()中

.on("mouseover",function(d,i){
					 	tooltip.html("Rating："+(rate[i]/10000)+"%")
                               .style("left",(d3.event.pageX)+"px")  
                               .style("top",(d3.event.pageY+20)+"px")  
                               .style("opacity",1.0);  	
						})
.on("mousemove",function(d){            
						tooltip.style("left",(d3.event.pageX)+"px")  
                               .style("top",(d3.event.pageY+20)+"px");
                        })          
.on("mouseout",function(d,i){
						tooltip.style("opacity",0.0); 
						})

2.触摸变色

实际上就是用.on()函数监听事件，mouseover时变色，mouseout时变回

.on("mouseover",function(d,i){
							d3.select(this)
							  .attr("fill","gray");//元素变为灰色
						})
						       
.on("mouseout",function(d,i){
							d3.select(this)
							  .attr("fill",color(rate[i]));//颜色变回设定好的颜色
						})

3.动画（施工）

.transition()
.duration(500)
.ease("linear")

六、JSP链接数据库（施工）