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的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。
友情赞助
如果你觉得博主的文章对你那么一点小帮助,恰巧你又有想打赏博主的小冲动,那么事不宜迟,赶紧扫一扫,小额地赞助下,攒个奶粉钱,也是让博主有动力继续努力,写出更好的文章^^。
1. 支付宝 2. 微信