Advertisement
Guest User

Untitled

a guest
Sep 5th, 2015
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.36 KB | None | 0 0
  1. !function(){
  2. var bP={};
  3. var b=30, bb=150, height=600, buffMargin=1, minHeight=14;
  4. var c1=[-150, 40], c2=[-50, 170], c3=[-10, 240]; //Column positions of labels.
  5. var colors =["#3366CC", "#DC3912", "#FF9900","#109618", "#990099", "#0099C6"];
  6.  
  7. bP.partData = function(data,p){
  8. var sData={};
  9.  
  10. sData.keys=[
  11. d3.set(data.map(function(d){ return d[0];})).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);}),
  12. d3.set(data.map(function(d){ return d[1];})).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);})
  13. ];
  14.  
  15. sData.data = [ sData.keys[0].map( function(d){ return sData.keys[1].map( function(v){ return 0; }); }),
  16. sData.keys[1].map( function(d){ return sData.keys[0].map( function(v){ return 0; }); })
  17. ];
  18.  
  19. data.forEach(function(d){
  20. sData.data[0][sData.keys[0].indexOf(d[0])][sData.keys[1].indexOf(d[1])]=d[p];
  21. sData.data[1][sData.keys[1].indexOf(d[1])][sData.keys[0].indexOf(d[0])]=d[p];
  22. });
  23.  
  24. return sData;
  25. }
  26.  
  27. function visualize(data){
  28. var vis ={};
  29. function calculatePosition(a, s, e, b, m){
  30. var total=d3.sum(a);
  31. var sum=0, neededHeight=0, leftoverHeight= e-s-2*b*a.length;
  32. var ret =[];
  33.  
  34. a.forEach(
  35. function(d){
  36. var v={};
  37. v.percent = (total == 0 ? 0 : d/total);
  38. v.value=d;
  39. v.height=Math.max(v.percent*(e-s-2*b*a.length), m);
  40. (v.height==m ? leftoverHeight-=m : neededHeight+=v.height );
  41. ret.push(v);
  42. }
  43. );
  44.  
  45. var scaleFact=leftoverHeight/Math.max(neededHeight,1), sum=0;
  46.  
  47. ret.forEach(
  48. function(d){
  49. d.percent = scaleFact*d.percent;
  50. d.height=(d.height==m? m : d.height*scaleFact);
  51. d.middle=sum+b+d.height/2;
  52. d.y=s + d.middle - d.percent*(e-s-2*b*a.length)/2;
  53. d.h= d.percent*(e-s-2*b*a.length);
  54. d.percent = (total == 0 ? 0 : d.value/total);
  55. sum+=2*b+d.height;
  56. }
  57. );
  58. return ret;
  59. }
  60.  
  61. vis.mainBars = [
  62. calculatePosition( data.data[0].map(function(d){ return d3.sum(d);}), 0, height, buffMargin, minHeight),
  63. calculatePosition( data.data[1].map(function(d){ return d3.sum(d);}), 0, height, buffMargin, minHeight)
  64. ];
  65.  
  66. vis.subBars = [[],[]];
  67. vis.mainBars.forEach(function(pos,p){
  68. pos.forEach(function(bar, i){
  69. calculatePosition(data.data[p][i], bar.y, bar.y+bar.h, 0, 0).forEach(function(sBar,j){
  70. sBar.key1=(p==0 ? i : j);
  71. sBar.key2=(p==0 ? j : i);
  72. vis.subBars[p].push(sBar);
  73. });
  74. });
  75. });
  76. vis.subBars.forEach(function(sBar){
  77. sBar.sort(function(a,b){
  78. return (a.key1 < b.key1 ? -1 : a.key1 > b.key1 ?
  79. 1 : a.key2 < b.key2 ? -1 : a.key2 > b.key2 ? 1: 0 )});
  80. });
  81.  
  82. vis.edges = vis.subBars[0].map(function(p,i){
  83. return {
  84. key1: p.key1,
  85. key2: p.key2,
  86. y1:p.y,
  87. y2:vis.subBars[1][i].y,
  88. h1:p.h,
  89. h2:vis.subBars[1][i].h
  90. };
  91. });
  92. vis.keys=data.keys;
  93. return vis;
  94. }
  95.  
  96. function arcTween(a) {
  97. var i = d3.interpolate(this._current, a);
  98. this._current = i(0);
  99. return function(t) {
  100. return edgePolygon(i(t));
  101. };
  102. }
  103.  
  104. function drawPart(data, id, p){
  105. d3.select("#"+id).append("g").attr("class","part"+p)
  106. .attr("transform","translate("+( p*(bb+b))+",0)");
  107. d3.select("#"+id).select(".part"+p).append("g").attr("class","subbars");
  108. d3.select("#"+id).select(".part"+p).append("g").attr("class","mainbars");
  109.  
  110. var mainbar = d3.select("#"+id).select(".part"+p).select(".mainbars")
  111. .selectAll(".mainbar").data(data.mainBars[p])
  112. .enter().append("g").attr("class","mainbar");
  113.  
  114. mainbar.append("rect").attr("class","mainrect")
  115. .attr("x", 0).attr("y",function(d){ return d.middle-d.height/2; })
  116. .attr("width",b).attr("height",function(d){ return d.height; })
  117. .style("shape-rendering","auto")
  118. .style("fill-opacity",0).style("stroke-width","0.5")
  119. .style("stroke","black").style("stroke-opacity",0);
  120.  
  121. mainbar.append("text").attr("class","barlabel")
  122. .attr("x", c1[p]).attr("y",function(d){ return d.middle+5;})
  123. .text(function(d,i){ return data.keys[p][i];})
  124. .attr("text-anchor","start" );
  125.  
  126. mainbar.append("text").attr("class","barvalue")
  127. .attr("x", c2[p]).attr("y",function(d){ return d.middle+5;})
  128. .text(function(d,i){ return d.value ;})
  129. .attr("text-anchor","end");
  130.  
  131. mainbar.append("text").attr("class","barpercent")
  132. .attr("x", c3[p]).attr("y",function(d){ return d.middle+5;})
  133. .text(function(d,i){ return "( "+Math.round(100*d.percent)+"%)" ;})
  134. .attr("text-anchor","end").style("fill","grey");
  135.  
  136. d3.select("#"+id).select(".part"+p).select(".subbars")
  137. .selectAll(".subbar").data(data.subBars[p]).enter()
  138. .append("rect").attr("class","subbar")
  139. .attr("x", 0).attr("y",function(d){ return d.y})
  140. .attr("width",b).attr("height",function(d){ return d.h})
  141. .style("fill",function(d){ return colors[d.key1];});
  142. }
  143.  
  144. function drawEdges(data, id){
  145. d3.select("#"+id).append("g").attr("class","edges").attr("transform","translate("+ b+",0)");
  146.  
  147. d3.select("#"+id).select(".edges").selectAll(".edge")
  148. .data(data.edges).enter().append("polygon").attr("class","edge")
  149. .attr("points", edgePolygon).style("fill",function(d){ return colors[d.key1];})
  150. .style("opacity",0.5).each(function(d) { this._current = d; });
  151. }
  152.  
  153. function drawHeader(header, id){
  154. d3.select("#"+id).append("g").attr("class","header").append("text").text(header[2])
  155. .style("font-size","20").attr("x",108).attr("y",-20).style("text-anchor","middle")
  156. .style("font-weight","bold");
  157.  
  158. [0,1].forEach(function(d){
  159. var h = d3.select("#"+id).select(".part"+d).append("g").attr("class","header");
  160.  
  161. h.append("text").text(header[d]).attr("x", (c1[d]+5))
  162. .attr("y", -5).style("fill","grey");
  163.  
  164. h.append("text").text("通信量(MByte)").attr("x", (c2[d]-25))
  165. .attr("y", -5).style("fill","grey");
  166.  
  167. h.append("line").attr("x1",c1[d]-10).attr("y1", -2)
  168. .attr("x2",c3[d]+10).attr("y2", -2).style("stroke","black")
  169. .style("stroke-width","1").style("shape-rendering","crispEdges");
  170. });
  171. }
  172.  
  173. function edgePolygon(d){
  174. return [0, d.y1, bb, d.y2, bb, d.y2+d.h2, 0, d.y1+d.h1].join(" ");
  175. }
  176.  
  177. function transitionPart(data, id, p){
  178. var mainbar = d3.select("#"+id).select(".part"+p).select(".mainbars")
  179. .selectAll(".mainbar").data(data.mainBars[p]);
  180.  
  181. mainbar.select(".mainrect").transition().duration(500)
  182. .attr("y",function(d){ return d.middle-d.height/2;})
  183. .attr("height",function(d){ return d.height;});
  184.  
  185. mainbar.select(".barlabel").transition().duration(500)
  186. .attr("y",function(d){ return d.middle+5;});
  187.  
  188. mainbar.select(".barvalue").transition().duration(500)
  189. .attr("y",function(d){ return d.middle+5;}).text(function(d,i){ return d.value ;});
  190.  
  191. mainbar.select(".barpercent").transition().duration(500)
  192. .attr("y",function(d){ return d.middle+5;})
  193. .text(function(d,i){ return "( "+Math.round(100*d.percent)+"%)" ;});
  194.  
  195. d3.select("#"+id).select(".part"+p).select(".subbars")
  196. .selectAll(".subbar").data(data.subBars[p])
  197. .transition().duration(500)
  198. .attr("y",function(d){ return d.y}).attr("height",function(d){ return d.h});
  199. }
  200.  
  201. function transitionEdges(data, id){
  202. d3.select("#"+id).append("g").attr("class","edges")
  203. .attr("transform","translate("+ b+",0)");
  204.  
  205. d3.select("#"+id).select(".edges").selectAll(".edge").data(data.edges)
  206. .transition().duration(500)
  207. .attrTween("points", arcTween)
  208. .style("opacity",function(d){ return (d.h1 ==0 || d.h2 == 0 ? 0 : 0.5);});
  209. }
  210.  
  211. function transition(data, id){
  212. transitionPart(data, id, 0);
  213. transitionPart(data, id, 1);
  214. transitionEdges(data, id);
  215. }
  216.  
  217. bP.draw = function(data, svg){
  218. data.forEach(function(biP,s){
  219. svg.append("g")
  220. .attr("id", biP.id)
  221. .attr("transform","translate("+ (550*s)+",0)");
  222.  
  223. var visData = visualize(biP.data);
  224. drawPart(visData, biP.id, 0);
  225. drawPart(visData, biP.id, 1);
  226. drawEdges(visData, biP.id);
  227. drawHeader(biP.header, biP.id);
  228.  
  229. [0,1].forEach(function(p){
  230. d3.select("#"+biP.id)
  231. .select(".part"+p)
  232. .select(".mainbars")
  233. .selectAll(".mainbar")
  234. .on("mouseover",function(d, i){ return bP.selectSegment(data, p, i); })
  235. .on("mouseout",function(d, i){ return bP.deSelectSegment(data, p, i); });
  236. });
  237. });
  238. }
  239.  
  240. bP.selectSegment = function(data, m, s){
  241. data.forEach(function(k){
  242. var newdata = {keys:[], data:[]};
  243.  
  244. newdata.keys = k.data.keys.map( function(d){ return d;});
  245.  
  246. newdata.data[m] = k.data.data[m].map( function(d){ return d;});
  247.  
  248. newdata.data[1-m] = k.data.data[1-m]
  249. .map( function(v){ return v.map(function(d, i){ return (s==i ? d : 0);}); });
  250.  
  251. transition(visualize(newdata), k.id);
  252.  
  253. var selectedBar = d3.select("#"+k.id).select(".part"+m).select(".mainbars")
  254. .selectAll(".mainbar").filter(function(d,i){ return (i==s);});
  255.  
  256. selectedBar.select(".mainrect").style("stroke-opacity",1);
  257. selectedBar.select(".barlabel").style('font-weight','bold');
  258. selectedBar.select(".barvalue").style('font-weight','bold');
  259. selectedBar.select(".barpercent").style('font-weight','bold');
  260. });
  261. }
  262.  
  263. bP.deSelectSegment = function(data, m, s){
  264. data.forEach(function(k){
  265. transition(visualize(k.data), k.id);
  266.  
  267. var selectedBar = d3.select("#"+k.id).select(".part"+m).select(".mainbars")
  268. .selectAll(".mainbar").filter(function(d,i){ return (i==s);});
  269.  
  270. selectedBar.select(".mainrect").style("stroke-opacity",0);
  271. selectedBar.select(".barlabel").style('font-weight','normal');
  272. selectedBar.select(".barvalue").style('font-weight','normal');
  273. selectedBar.select(".barpercent").style('font-weight','normal');
  274. });
  275. }
  276.  
  277. this.bP = bP;
  278. }();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement