AngularJS in Action读书笔记6(实战篇)——bug hunting

　　这一系列文章感觉写的不好，思维跨度很大，原本是由于与《Angularjs in action》有种相见恨晚而激发要写点读后感之类的文章，但是在翻译或是阐述的时候还是会心有余而力不足，零零总总的写了《Angularjs in action》读书笔记的前三篇。渐渐明白，将新知识搞懂是一门本事，而将自己明白的share出去并让别人也明白更是一门学问。几篇翻译下来，感觉有些苍白，有网友给建议说是真枪实战的做点东西，结合代码更有说服力。想想也是，纸上得来终觉浅，绝知此事要躬行。于是乎就有了《Angularjs in action》读书笔记（实战篇）这一系列的文章。谨以此系列来对过去的工作和感悟做了一些记录。对于新增的statistic模块的实现也基本到此结束，目前实现的功能：

1.数据统计

　　可以选择指定的用户，并对当前选择的用户下的status的条目进行统计，比如在TODO阶段的有几条，在InProgress阶段的又有几条。

2.图形统计

　　（1）图形统计设置有开关，可以选择显示/隐藏

　　（2）图形统计-饼状图，可以选择饼状图可视化显示，图形会展示每个statu所占的比例和对应的statu名称，支持tooltip功能

　　（3）图形统计-柱状图， 可以选择柱状图可视化显示，图形会展示每个statu的数量，可以清晰的看到那个statu的条数最多/最少

　　效果如下：

　　a.默认不显示可视化统计结果

　　b.点击show（默认显示饼状图）或者点击Pie chart按钮后

　　c.点击Bar Chart后

d.点击Hide按钮后

　　效果如a所示。

　　这篇主要是bug hunting主题，主要就是解决下编码过程中出现的一些bug。

　　继上篇来说看似页面能够展示可视化结果以及数据信息，但是在实际操作中还是会发现一些问题：

1.svg图形重复创建

bug：点击statistic按钮进入statistic模块，点击用户对应的统计按钮后，会弹出数据和图形统计信息，在不刷新页面的情况下，点击返回或进入其他模块，之后再回到这个统计页面，就会发现这里出现了两个统计图形，重复上面的操作，每次都会增加一个统计图形。

hunting：查看代码发现，只要进入统计页面，系统不会判断直接又创建一个svg标签并绑定到body上。

　　解决的方法就是在进入这个页面的时候对svg做一个判断，当svg的超过1时，就不再执行创建svg和显示svg的代码

angular.module("Angello.Statistic").directive(
		"d3chart",
		function() {
			return {
				restrict : 'EA',
				scope : {
					stories : "=",
					statusArr : "="
				},
				link : function($scope, $element, $attrs) {// link or controller
						var width = 400;
						var height = 400;
						var dataset = $scope.statusArr;
						if($("svg").length >= 1){  //if exist svg in html source code return, else create 
							return;
						}else{
							var svg = d3.select("body").attr("align", "center")// align svg to center
							.append("svg").attr("width", width).attr("height", height);
							var pie = d3.layout.pie();
							var piedata = pie(dataset);
							var outerRadius = 150; // 外半径
							var innerRadius = 0; // 内半径，为0则中间没有空白
							var arc = d3.svg.arc() // 弧生成器
							.innerRadius(innerRadius) // 设置内半径
							.outerRadius(outerRadius); // 设置外半径
							var color = d3.scale.category10();
							var arcs = svg.selectAll("g").data(piedata).enter()
									.append("g").attr(
											"transform",
											"translate(" + (width / 2) + ","
													+ (width / 2) + ")");
							arcs.append("path").attr("fill", function(d, i) {
								return color(i);
							}).attr("d", function(d) {
								return arc(d);
							});
							arcs.append("text").attr("transform", function(d) {
								return "translate(" + arc.centroid(d) + ")";
							}).attr("text-anchor", "middle").text(function(d) {
								return d.data;
							});
							console.log(dataset);
							console.log(piedata);
						}
						
					}

//						}
			}
		});

这里的$("svg")是JQuery的语法，意为找到标签名为svg的集合。

2.脏数据显示

bug：当从统计页面的statistic模块切换到其他模块如dashboard后，仍然可以看到饼状图作为背景显示在dashboard的页面背景中。这是一个脏数据。

hunting：这时候最容易想到需要使用的就是ng-if，所以想到用ng-if来控制这个div也就是d3chart这个指令的显示。一开始的思路是

<div ng-if="myUser.existed"  status-arr="myUser.statusArr" d3chart></div>

　　直接通过ng-if控制，然后在DataController中为myUser.existed赋值为true，然后想着在directive中将这个myUser.existed置为false，但是一直为这个existed如何注入到directive中并进行赋值所困扰，几经周折放弃了这个想法，想到了个间接的解决方案

<div ng-if="myUser.existed">
<div existed="myUser.existed"  status-arr="myUser.statusArr" d3chart></div>    
</div>

　　通过上层的div来控制里面div的显示，然后在里面div写成existed="myUser.existed"的形式绑定到directive的scope中实现赋值。 　　这个思路应该是没有问题的，但是在实操过程中，还是没能解决问题。仔细一想是因为在directive中原来的代码是这样的：

link : function($scope, $element, $attrs) {// link or controller
						var width = 400;
						var height = 400;
						var dataset = $scope.statusArr;
						if($("svg").length >= 1){  //if exist svg in html source code return, else create 
							return;
						}else{
							var svg = d3.select("body").attr("align", "center")// align svg to center
							.append("svg").attr("width", width).attr("height", height);
							var pie = d3.layout.pie();
							var piedata = pie(dataset);　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　....

　　这段代码意思是将svg的标签append到body下面，这与data.html中的div是平级，所以又改造了这里的代码为：

link : function($scope, $element, $attrs) {// link or controller
						var width = 400;
						var height = 400;
						var dataset = $scope.statusArr;
						if($("svg").length >= 1){  //if exist svg in html source code return, else create 
							return;
						}else{
//							d3.select("body").attr("align", "center");
							var svg = d3.select(".flag").attr("align", "center")// align svg to center and move svg into div
							.append("svg").attr("width", width).attr("height", height);
							var pie = d3.layout.pie();
							var piedata = pie(dataset);

　　这样dom中的层级结构就是svg是包在div里面的。就实现了ng-if对于这个div的操作会影响到svg的显示，否则按照原来的代码，ng-if只能管到div的显示，而div与svg平级，所以svg并不受影响。

　　这样一来，就能够完成在directive中修改myUser.existed的值了。使得在不同模块切换过程中不会残留statistic中的图形显示了。

　　关于如何添加柱状图Bar Chart支持、如何添加悬浮信息提示框、如何显示图形对应模块的名称而不是数字等问题可以参看代码，这里以及后面就不再贴代码，详情点击这里。

　　如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！如果您想持续关注我的文章，请扫描二维码，关注JackieZheng的微信公众号，我会将我的文章推送给您，并和您一起分享我日常阅读过的优质文章。