Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- !function(){
- var bP={};
- var b=30, bb=150, height=600, buffMargin=1, minHeight=14;
- var c1=[-150, 40], c2=[-50, 170], c3=[-10, 240]; //Column positions of labels.
- var colors =["#3366CC", "#DC3912", "#FF9900","#109618", "#990099", "#0099C6"];
- bP.partData = function(data,p){
- var sData={};
- sData.keys=[
- d3.set(data.map(function(d){ return d[0];})).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);}),
- d3.set(data.map(function(d){ return d[1];})).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);})
- ];
- sData.data = [ sData.keys[0].map( function(d){ return sData.keys[1].map( function(v){ return 0; }); }),
- sData.keys[1].map( function(d){ return sData.keys[0].map( function(v){ return 0; }); })
- ];
- data.forEach(function(d){
- sData.data[0][sData.keys[0].indexOf(d[0])][sData.keys[1].indexOf(d[1])]=d[p];
- sData.data[1][sData.keys[1].indexOf(d[1])][sData.keys[0].indexOf(d[0])]=d[p];
- });
- return sData;
- }
- function visualize(data){
- var vis ={};
- function calculatePosition(a, s, e, b, m){
- var total=d3.sum(a);
- var sum=0, neededHeight=0, leftoverHeight= e-s-2*b*a.length;
- var ret =[];
- a.forEach(
- function(d){
- var v={};
- v.percent = (total == 0 ? 0 : d/total);
- v.value=d;
- v.height=Math.max(v.percent*(e-s-2*b*a.length), m);
- (v.height==m ? leftoverHeight-=m : neededHeight+=v.height );
- ret.push(v);
- }
- );
- var scaleFact=leftoverHeight/Math.max(neededHeight,1), sum=0;
- ret.forEach(
- function(d){
- d.percent = scaleFact*d.percent;
- d.height=(d.height==m? m : d.height*scaleFact);
- d.middle=sum+b+d.height/2;
- d.y=s + d.middle - d.percent*(e-s-2*b*a.length)/2;
- d.h= d.percent*(e-s-2*b*a.length);
- d.percent = (total == 0 ? 0 : d.value/total);
- sum+=2*b+d.height;
- }
- );
- return ret;
- }
- vis.mainBars = [
- calculatePosition( data.data[0].map(function(d){ return d3.sum(d);}), 0, height, buffMargin, minHeight),
- calculatePosition( data.data[1].map(function(d){ return d3.sum(d);}), 0, height, buffMargin, minHeight)
- ];
- vis.subBars = [[],[]];
- vis.mainBars.forEach(function(pos,p){
- pos.forEach(function(bar, i){
- calculatePosition(data.data[p][i], bar.y, bar.y+bar.h, 0, 0).forEach(function(sBar,j){
- sBar.key1=(p==0 ? i : j);
- sBar.key2=(p==0 ? j : i);
- vis.subBars[p].push(sBar);
- });
- });
- });
- vis.subBars.forEach(function(sBar){
- sBar.sort(function(a,b){
- return (a.key1 < b.key1 ? -1 : a.key1 > b.key1 ?
- 1 : a.key2 < b.key2 ? -1 : a.key2 > b.key2 ? 1: 0 )});
- });
- vis.edges = vis.subBars[0].map(function(p,i){
- return {
- key1: p.key1,
- key2: p.key2,
- y1:p.y,
- y2:vis.subBars[1][i].y,
- h1:p.h,
- h2:vis.subBars[1][i].h
- };
- });
- vis.keys=data.keys;
- return vis;
- }
- function arcTween(a) {
- var i = d3.interpolate(this._current, a);
- this._current = i(0);
- return function(t) {
- return edgePolygon(i(t));
- };
- }
- function drawPart(data, id, p){
- d3.select("#"+id).append("g").attr("class","part"+p)
- .attr("transform","translate("+( p*(bb+b))+",0)");
- d3.select("#"+id).select(".part"+p).append("g").attr("class","subbars");
- d3.select("#"+id).select(".part"+p).append("g").attr("class","mainbars");
- var mainbar = d3.select("#"+id).select(".part"+p).select(".mainbars")
- .selectAll(".mainbar").data(data.mainBars[p])
- .enter().append("g").attr("class","mainbar");
- mainbar.append("rect").attr("class","mainrect")
- .attr("x", 0).attr("y",function(d){ return d.middle-d.height/2; })
- .attr("width",b).attr("height",function(d){ return d.height; })
- .style("shape-rendering","auto")
- .style("fill-opacity",0).style("stroke-width","0.5")
- .style("stroke","black").style("stroke-opacity",0);
- mainbar.append("text").attr("class","barlabel")
- .attr("x", c1[p]).attr("y",function(d){ return d.middle+5;})
- .text(function(d,i){ return data.keys[p][i];})
- .attr("text-anchor","start" );
- mainbar.append("text").attr("class","barvalue")
- .attr("x", c2[p]).attr("y",function(d){ return d.middle+5;})
- .text(function(d,i){ return d.value ;})
- .attr("text-anchor","end");
- mainbar.append("text").attr("class","barpercent")
- .attr("x", c3[p]).attr("y",function(d){ return d.middle+5;})
- .text(function(d,i){ return "( "+Math.round(100*d.percent)+"%)" ;})
- .attr("text-anchor","end").style("fill","grey");
- d3.select("#"+id).select(".part"+p).select(".subbars")
- .selectAll(".subbar").data(data.subBars[p]).enter()
- .append("rect").attr("class","subbar")
- .attr("x", 0).attr("y",function(d){ return d.y})
- .attr("width",b).attr("height",function(d){ return d.h})
- .style("fill",function(d){ return colors[d.key1];});
- }
- function drawEdges(data, id){
- d3.select("#"+id).append("g").attr("class","edges").attr("transform","translate("+ b+",0)");
- d3.select("#"+id).select(".edges").selectAll(".edge")
- .data(data.edges).enter().append("polygon").attr("class","edge")
- .attr("points", edgePolygon).style("fill",function(d){ return colors[d.key1];})
- .style("opacity",0.5).each(function(d) { this._current = d; });
- }
- function drawHeader(header, id){
- d3.select("#"+id).append("g").attr("class","header").append("text").text(header[2])
- .style("font-size","20").attr("x",108).attr("y",-20).style("text-anchor","middle")
- .style("font-weight","bold");
- [0,1].forEach(function(d){
- var h = d3.select("#"+id).select(".part"+d).append("g").attr("class","header");
- h.append("text").text(header[d]).attr("x", (c1[d]+5))
- .attr("y", -5).style("fill","grey");
- h.append("text").text("é俥é(MByte)").attr("x", (c2[d]-25))
- .attr("y", -5).style("fill","grey");
- h.append("line").attr("x1",c1[d]-10).attr("y1", -2)
- .attr("x2",c3[d]+10).attr("y2", -2).style("stroke","black")
- .style("stroke-width","1").style("shape-rendering","crispEdges");
- });
- }
- function edgePolygon(d){
- return [0, d.y1, bb, d.y2, bb, d.y2+d.h2, 0, d.y1+d.h1].join(" ");
- }
- function transitionPart(data, id, p){
- var mainbar = d3.select("#"+id).select(".part"+p).select(".mainbars")
- .selectAll(".mainbar").data(data.mainBars[p]);
- mainbar.select(".mainrect").transition().duration(500)
- .attr("y",function(d){ return d.middle-d.height/2;})
- .attr("height",function(d){ return d.height;});
- mainbar.select(".barlabel").transition().duration(500)
- .attr("y",function(d){ return d.middle+5;});
- mainbar.select(".barvalue").transition().duration(500)
- .attr("y",function(d){ return d.middle+5;}).text(function(d,i){ return d.value ;});
- mainbar.select(".barpercent").transition().duration(500)
- .attr("y",function(d){ return d.middle+5;})
- .text(function(d,i){ return "( "+Math.round(100*d.percent)+"%)" ;});
- d3.select("#"+id).select(".part"+p).select(".subbars")
- .selectAll(".subbar").data(data.subBars[p])
- .transition().duration(500)
- .attr("y",function(d){ return d.y}).attr("height",function(d){ return d.h});
- }
- function transitionEdges(data, id){
- d3.select("#"+id).append("g").attr("class","edges")
- .attr("transform","translate("+ b+",0)");
- d3.select("#"+id).select(".edges").selectAll(".edge").data(data.edges)
- .transition().duration(500)
- .attrTween("points", arcTween)
- .style("opacity",function(d){ return (d.h1 ==0 || d.h2 == 0 ? 0 : 0.5);});
- }
- function transition(data, id){
- transitionPart(data, id, 0);
- transitionPart(data, id, 1);
- transitionEdges(data, id);
- }
- bP.draw = function(data, svg){
- data.forEach(function(biP,s){
- svg.append("g")
- .attr("id", biP.id)
- .attr("transform","translate("+ (550*s)+",0)");
- var visData = visualize(biP.data);
- drawPart(visData, biP.id, 0);
- drawPart(visData, biP.id, 1);
- drawEdges(visData, biP.id);
- drawHeader(biP.header, biP.id);
- [0,1].forEach(function(p){
- d3.select("#"+biP.id)
- .select(".part"+p)
- .select(".mainbars")
- .selectAll(".mainbar")
- .on("mouseover",function(d, i){ return bP.selectSegment(data, p, i); })
- .on("mouseout",function(d, i){ return bP.deSelectSegment(data, p, i); });
- });
- });
- }
- bP.selectSegment = function(data, m, s){
- data.forEach(function(k){
- var newdata = {keys:[], data:[]};
- newdata.keys = k.data.keys.map( function(d){ return d;});
- newdata.data[m] = k.data.data[m].map( function(d){ return d;});
- newdata.data[1-m] = k.data.data[1-m]
- .map( function(v){ return v.map(function(d, i){ return (s==i ? d : 0);}); });
- transition(visualize(newdata), k.id);
- var selectedBar = d3.select("#"+k.id).select(".part"+m).select(".mainbars")
- .selectAll(".mainbar").filter(function(d,i){ return (i==s);});
- selectedBar.select(".mainrect").style("stroke-opacity",1);
- selectedBar.select(".barlabel").style('font-weight','bold');
- selectedBar.select(".barvalue").style('font-weight','bold');
- selectedBar.select(".barpercent").style('font-weight','bold');
- });
- }
- bP.deSelectSegment = function(data, m, s){
- data.forEach(function(k){
- transition(visualize(k.data), k.id);
- var selectedBar = d3.select("#"+k.id).select(".part"+m).select(".mainbars")
- .selectAll(".mainbar").filter(function(d,i){ return (i==s);});
- selectedBar.select(".mainrect").style("stroke-opacity",0);
- selectedBar.select(".barlabel").style('font-weight','normal');
- selectedBar.select(".barvalue").style('font-weight','normal');
- selectedBar.select(".barpercent").style('font-weight','normal');
- });
- }
- this.bP = bP;
- }();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement