From 8ec30306b39df8f888cedba0def234597e0f5107 Mon Sep 17 00:00:00 2001 From: Masayuki Tanaka Date: Fri, 31 Jan 2014 12:54:29 +0900 Subject: [PATCH] Fix x grid when rotated --- c3.js | 11 +++-- c3.min.js | 122 +++++++++++++++++++++++++++--------------------------- 2 files changed, 66 insertions(+), 67 deletions(-) diff --git a/c3.js b/c3.js index 7eca9af..6955ab9 100644 --- a/c3.js +++ b/c3.js @@ -1444,13 +1444,12 @@ xgrid = main.select('.xgrids').selectAll(".xgrid") .data(xgridData); xgrid.enter().append('line').attr("class", "xgrid"); + xgrid.attr("x1", __axis_rotated ? 0 : function (d) { return x(d) - xAxis.tickOffset(); }) + .attr("x2", __axis_rotated ? width : function (d) { return x(d) - xAxis.tickOffset(); }) + .attr("y1", __axis_rotated ? function (d) { return x(d) - xAxis.tickOffset(); } : margin.top) + .attr("y2", __axis_rotated ? function (d) { return x(d) - xAxis.tickOffset(); } : height) + .style("opacity", function () { return +d3.select(this).attr(__axis_rotated ? 'y1' : 'x1') === (__axis_rotated ? height : 0) ? 0 : 1; }); xgrid.exit().remove(); - main.selectAll(".xgrid") - .attr("x1", function (d) { return x(d) - xAxis.tickOffset(); }) - .attr("x2", function (d) { return x(d) - xAxis.tickOffset(); }) - .attr("y1", margin.top) - .attr("y2", height) - .style("opacity", function () { return d3.select(this).attr('x1') === 0 ? 0 : 1; }); } if (__grid_x_lines) { xgridLine = main.selectAll(".xgrid-lines"); diff --git a/c3.min.js b/c3.min.js index b1a137d..1a08aaf 100644 --- a/c3.min.js +++ b/c3.min.js @@ -1,69 +1,69 @@ -(function(O){function wc(){function n(e,c){e.attr("transform",function(e){return"translate("+(c(e)+Z)+", 0)"})}function t(e,c){e.attr("transform",function(e){return"translate(0,"+c(e)+")"})}function O(e){var c=e[0];e=e[e.length-1];return ca?0:a}function nb(a){var b=Ia[a.id];a.name=n(b)?b:a.id;return a}function Wb(a){var b=a[0],d={},k=[],e,c;for(e=1;ew[d].indexOf(e.id)))for(k=0;k=g;g+=u)s+=e(a[c-1],a[c],g,v)}return s} -function wb(a){var b,d;db=e.select(ua);if(db.empty())O.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".');else{db.html("");g.data.x=void 0;g.data.targets=Ja(a);sa();Eb();l.domain(e.extent(a.map(function(a){return a.x})));y.domain(ka("y"));T.domain(ka("y2"));ba.domain(l.domain());Wa.domain(y.domain());Xa.domain(T.domain());J.ticks(10>a.length?a.length:10);na.ticks(Yc).outerTickSize(0).tickFormat(Zc);Ya.ticks($c).outerTickSize(0).tickFormat(ad); -U=l.domain();F.x(ba);pa&&G.x(l);Ma=e.select(ua).append("svg").attr("width",r+A+aa).attr("height",u+p+E).on("mouseenter",bd).on("mouseleave",cd);eb=Ma.append("defs");eb.append("clipPath").attr("id",xb).append("rect").attr("y",p).attr("width",r).attr("height",u-p);eb.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1-A).attr("y",-20).attr("width",Q).attr("height",P);eb.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-A+1).attr("y",p-1).attr("width",ja).attr("height", -hb);h=Ma.append("g").attr("transform",K.main);x=wa?Ma.append("g").attr("transform",K.context):null;xa=ya?Ma.append("g").attr("transform",K.legend):null;X=e.select(ua).style("position","relative").append("div").style("position","absolute").style("z-index","10").style("display","none");h.append("g").attr("class","x axis").attr("clip-path",f?"":"url(#xaxis-clip)").attr("transform",K.x).call(f?na:J).append("text").attr("class","-axis-x-label").attr("x",r).attr("dy","-.5em").style("text-anchor","end").text(dd); -h.append("g").attr("class","y axis").attr("clip-path",f?"url(#yaxis-clip)":"").call(f?J:na).append("text").attr("transform","rotate(-90)").attr("dy","1.2em").attr("dx","-.5em").style("text-anchor","end").text(ed);Mb&&h.append("g").attr("class","y2 axis").attr("transform",K.y2).call(Ya);b=h.append("g").attr("clip-path",Na).attr("class","grid");mc&&b.append("g").attr("class","xgrids");yb&&(d=b.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(yb).enter().append("g").attr("class", -"xgrid-line"),d.append("line").attr("class",function(a){return""+a["class"]}),d.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",f?"":"rotate(-90)").attr("dx",f?0:-p).attr("dy",-6).text(function(a){return a.text}));fd&&b.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",f?0:-10).attr("x2",f?r:-10).attr("y1",f?-10:p).attr("y2",f?-10:u);nc&&b.append("g").attr("class","ygrids");zb&&b.append("g").attr("class", +(function(O){function xc(){function n(e,c){e.attr("transform",function(e){return"translate("+(c(e)+Z)+", 0)"})}function r(e,c){e.attr("transform",function(e){return"translate(0,"+c(e)+")"})}function O(e){var c=e[0];e=e[e.length-1];return ca?0:a}function nb(a){var b=Ia[a.id];a.name=n(b)?b:a.id;return a}function Wb(a){var b=a[0],d={},k=[],e,c;for(e=1;ew[d].indexOf(e.id)))for(k=0;k=g;g+=s)u+=e(a[c-1],a[c],g,v)}return u} +function wb(a){var b,d;db=e.select(ua);if(db.empty())O.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".');else{db.html("");g.data.x=void 0;g.data.targets=Ja(a);sa();Eb();l.domain(e.extent(a.map(function(a){return a.x})));y.domain(ka("y"));T.domain(ka("y2"));ba.domain(l.domain());Wa.domain(y.domain());Xa.domain(T.domain());B.ticks(10>a.length?a.length:10);na.ticks(Zc).outerTickSize(0).tickFormat($c);Ya.ticks(ad).outerTickSize(0).tickFormat(bd); +U=l.domain();G.x(ba);pa&&H.x(l);Ma=e.select(ua).append("svg").attr("width",p+A+aa).attr("height",t+s+F).on("mouseenter",cd).on("mouseleave",dd);eb=Ma.append("defs");eb.append("clipPath").attr("id",xb).append("rect").attr("y",s).attr("width",p).attr("height",t-s);eb.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1-A).attr("y",-20).attr("width",Q).attr("height",P);eb.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-A+1).attr("y",s-1).attr("width",ja).attr("height", +hb);h=Ma.append("g").attr("transform",K.main);x=wa?Ma.append("g").attr("transform",K.context):null;xa=ya?Ma.append("g").attr("transform",K.legend):null;X=e.select(ua).style("position","relative").append("div").style("position","absolute").style("z-index","10").style("display","none");h.append("g").attr("class","x axis").attr("clip-path",f?"":"url(#xaxis-clip)").attr("transform",K.x).call(f?na:B).append("text").attr("class","-axis-x-label").attr("x",p).attr("dy","-.5em").style("text-anchor","end").text(ed); +h.append("g").attr("class","y axis").attr("clip-path",f?"url(#yaxis-clip)":"").call(f?B:na).append("text").attr("transform","rotate(-90)").attr("dy","1.2em").attr("dx","-.5em").style("text-anchor","end").text(fd);Mb&&h.append("g").attr("class","y2 axis").attr("transform",K.y2).call(Ya);b=h.append("g").attr("clip-path",Na).attr("class","grid");nc&&b.append("g").attr("class","xgrids");yb&&(d=b.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(yb).enter().append("g").attr("class", +"xgrid-line"),d.append("line").attr("class",function(a){return""+a["class"]}),d.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",f?"":"rotate(-90)").attr("dx",f?0:-s).attr("dy",-6).text(function(a){return a.text}));gd&&b.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",f?0:-10).attr("x2",f?p:-10).attr("y1",f?-10:s).attr("y2",f?-10:t);oc&&b.append("g").attr("class","ygrids");zb&&b.append("g").attr("class", "ygrid-lines").selectAll("ygrid-line").data(zb).enter().append("line").attr("class",function(a){return"ygrid-line "+a["class"]});h.append("g").attr("clip-path",Na).attr("class","regions");h.append("g").attr("clip-path",Na).attr("class","chart");h.select(".chart").append("g").attr("class","event-rects").style("fill-opacity",0).style("cursor",pa?"ew-resize":null).selectAll(".event-rects").data(a).enter().append("rect").attr("class",function(a,b){return"event-rect event-rect-"+b}).style("cursor",ga&& -qa?"pointer":null).on("mouseover",function(a,b){if(!fb){var d=g.data.targets.map(function(a){return nb(a.values[b])}),e,c;if(0",d,c,e;for(d=0;d"+e+""+c+"";return b+""}),id=c(["tooltip","init","show"],!1),za=c(["tooltip","init","x"],0),sc=c(["tooltip","init","position"],{top:"0px",left:"50px"}),xb=ua.replace("#","")+"-clip",Na="url(#"+xb+")",z="timeseries"===vc,ca="categorized"===vc,ob=!z&&V,Cb=null,fb=!1,Bb=!1,la=ya?40: -0,oa=e.time.format(pd).parse,W=function(a,b){var d=[],c=null!==b?b:"#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf".split(" ");return function(b){if(b in a)return a[b];-1===d.indexOf(b)&&d.push(b);return c[d.indexOf(b)%c.length]}}(qd,rd),Ec=function(){var a=[[e.time.format("%Y/%-m/%-d"),function(){return!0}],[e.time.format("%-m/%-d"),function(a){return a.getMonth()}],[e.time.format("%-m/%-d"),function(a){return 1!==a.getDate()}],[e.time.format("%-m/%-d"),function(a){return a.getDay()&& -1!==a.getDate()}],[e.time.format("%I %p"),function(a){return a.getHours()}],[e.time.format("%I:%M"),function(a){return a.getMinutes()}],[e.time.format(":%S"),function(a){return a.getSeconds()}],[e.time.format(".%L"),function(a){return a.getMilliseconds()}]];return function(b){for(var d=a.length-1,c=a[d];!c[1](b);)c=a[--d];return c[0](b)}}(),Ib,Pb,Kb,Va,Ob,Qb,r,u,ma,ib,ta,Sb,Tb,lb,mb,l,y,T,ba,Wa,Xa,J,na,Ya,Da,zc=f?"left":"bottom",Ac=f?kb?"top":"bottom":kb?"right":"left",Bc=f?jb?"bottom":"top":jb?"left": -"right",Cc="bottom",K={main:function(){return"translate("+A+","+p+")"},context:function(){return"translate("+m+","+Aa+")"},legend:function(){return"translate("+Gb+","+Fb+")"},y2:function(){return"translate("+(f?0:r)+","+(f?10:0)+")"},x:function(){return"translate(0,"+u+")"},subx:function(){return"translate(0,"+ma+")"}},ld=function(){var a=e.svg.line().x(f?function(a){return D(a.id)(a.value)}:cb).y(f?cb:function(a){return D(a.id)(a.value)});return function(b){var d=lc(b.values),c;if(ub(b))return"spline"=== -fa["string"===typeof b?b:b.id]?a.interpolate("cardinal"):a.interpolate("linear"),uc[b.id]?Xc(d,l,D(b.id),uc[b.id]):a(d);c=l(d[0].x);b=D(b.id)(d[0].value);return f?"M "+b+" "+c:"M "+c+" "+b}}(),md=function(){var a=e.svg.line().x(function(a){return ba(a.x)}).y(function(a){return R(a.id)(a.value)});return function(b){var d=lc(b.values);return ub(b)?a(d):"M "+ba(d[0].x)+" "+R(b.id)(d[0].value)}}(),F=e.svg.brush().on("brush",function(){B({withTransition:!1,withY:!1,withSubchart:!1,withUpdateXDomain:!0})}), -G=e.behavior.zoom().on("zoomstart",function(){G.altDomain=e.event.sourceEvent.altKey?l.orgDomain():null}).on("zoom",pa?nd:null);F.update=function(){x&&x.select(".x.brush").call(this);return this};G.orgScaleExtent=function(){var a=tc?tc:[1,10];return[a[0],Math.max(va()/a[1],a[1])]};G.updateScaleExtent=function(){var a=l.orgDomain(),a=(a[1]-a[0])/(U[1]-U[0]),b=this.orgScaleExtent();this.scaleExtent([b[0]*a,b[1]*a]);return this};var Ma,eb,h,x,xa,X,db,bb=null,pb=null,U;g.focus=function(a){g.defocus(); +{data:{}},ab={},ha="_expanded_",ia="_selected_",Db="_included_",ua=c(["bindto"],"#chart"),Ua=c(["size","width"],null),Rb=c(["size","height"],null),Nb=c(["padding","left"],null),Lb=c(["padding","right"],null),pa=c(["zoom","enabled"],!1),uc=c(["zoom","extent"],null),id=c(["zoom","privileged"],!1),cd=c(["onenter"],function(){}),dd=c(["onleave"],function(){});if(!("data"in Y))throw Error("data is required in config");var V=c(["data","x"],void 0),qd=c(["data","x_format"],"%Y-%m-%d"),Oc=c(["data","id_converter"], +function(a){return a}),Ia=c(["data","names"],{}),w=c(["data","groups"],[]),Ub=c(["data","axes"],{}),fa=c(["data","types"],{}),vc=c(["data","regions"],{}),rd=c(["data","colors"],{}),ga=c(["data","selection","enabled"],!1),qa=c(["data","selection","grouped"],!1),ra=c(["data","selection","isselectable"],function(){return!0}),wa=c(["subchart","show"],!1),Jb=wa?c(["subchart","size","height"],60):0,sd=c(["color","pattern"],null),ya=c(["legend","show"],!0),Qa=c(["legend","item","width"],80),pd=c(["legend", +"item","onclick"],function(){}),wc=c(["axis","x","type"],"indexed"),Ea=c(["axis","x","categories"],[]),Ec=c(["axis","x","tick","centered"],!1),Za=c(["axis","x","tick","format"],null),Oa=c(["axis","x","default"],null),ed=c(["axis","x","label"],null),Kc=c(["axis","y","max"],null),Ic=c(["axis","y","min"],null),Mc=c(["axis","y","center"],null),fd=c(["axis","y","label"],null),kb=c(["axis","y","inner"],!1),$c=c(["axis","y","format"],function(a){return a}),Ga=c(["axis","y","padding"],null),Zc=c(["axis", +"y","ticks"],10),Mb=c(["axis","y2","show"],!1),Jc=c(["axis","y2","max"],null),Hc=c(["axis","y2","min"],null),Lc=c(["axis","y2","center"],null),jb=c(["axis","y2","inner"],!1),bd=c(["axis","y2","format"],function(a){return a}),Ha=c(["axis","y2","padding"],null),ad=c(["axis","y2","ticks"],10),f=c(["axis","rotated"],!1),nc=c(["grid","x","show"],!1),ld=c(["grid","x","type"],"tick"),yb=c(["grid","x","lines"],null),oc=c(["grid","y","show"],!1),zb=c(["grid","y","lines"],null),Ab=c(["point","show"],!0)?c(["point", +"r"],2.5):0,gd=c(["point","focus","line","enabled"],!0),pc=c(["point","focus","expand","enabled"],!0),qc=c(["point","focus","expand","r"],pc?4:Ab),La=c(["point","focus","select","r"],8),hd=c(["point","onclick"],function(){}),Vc=c(["point","onselected"],function(){}),Wc=c(["point","onunselected"],function(){}),L=c(["regions"],[]),rc=c(["tooltip","contents"],function(a){var b="",d,c,e;for(d=0;d";return b+"
"+J()(a[0].x)+"
"+e+""+c+"
"}),jd=c(["tooltip","init","show"],!1),za=c(["tooltip","init","x"],0),tc=c(["tooltip","init","position"],{top:"0px",left:"50px"}),xb=ua.replace("#","")+"-clip",Na="url(#"+xb+")",z="timeseries"===wc,ca="categorized"===wc,ob=!z&&V,Cb=null,fb=!1,Bb=!1,la=ya?40: +0,oa=e.time.format(qd).parse,W=function(a,b){var d=[],c=null!==b?b:"#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf".split(" ");return function(b){if(b in a)return a[b];-1===d.indexOf(b)&&d.push(b);return c[d.indexOf(b)%c.length]}}(rd,sd),Fc=function(){var a=[[e.time.format("%Y/%-m/%-d"),function(){return!0}],[e.time.format("%-m/%-d"),function(a){return a.getMonth()}],[e.time.format("%-m/%-d"),function(a){return 1!==a.getDate()}],[e.time.format("%-m/%-d"),function(a){return a.getDay()&& +1!==a.getDate()}],[e.time.format("%I %p"),function(a){return a.getHours()}],[e.time.format("%I:%M"),function(a){return a.getMinutes()}],[e.time.format(":%S"),function(a){return a.getSeconds()}],[e.time.format(".%L"),function(a){return a.getMilliseconds()}]];return function(b){for(var d=a.length-1,c=a[d];!c[1](b);)c=a[--d];return c[0](b)}}(),Ib,Pb,Kb,Va,Ob,Qb,p,t,ma,ib,ta,Sb,Tb,lb,mb,l,y,T,ba,Wa,Xa,B,na,Ya,Da,Ac=f?"left":"bottom",Bc=f?kb?"top":"bottom":kb?"right":"left",Cc=f?jb?"bottom":"top":jb?"left": +"right",Dc="bottom",K={main:function(){return"translate("+A+","+s+")"},context:function(){return"translate("+m+","+Aa+")"},legend:function(){return"translate("+Gb+","+Fb+")"},y2:function(){return"translate("+(f?0:p)+","+(f?10:0)+")"},x:function(){return"translate(0,"+t+")"},subx:function(){return"translate(0,"+ma+")"}},md=function(){var a=e.svg.line().x(f?function(a){return E(a.id)(a.value)}:cb).y(f?cb:function(a){return E(a.id)(a.value)});return function(b){var d=lc(b.values),c;if(ub(b))return"spline"=== +fa["string"===typeof b?b:b.id]?a.interpolate("cardinal"):a.interpolate("linear"),vc[b.id]?Yc(d,l,E(b.id),vc[b.id]):a(d);c=l(d[0].x);b=E(b.id)(d[0].value);return f?"M "+b+" "+c:"M "+c+" "+b}}(),nd=function(){var a=e.svg.line().x(function(a){return ba(a.x)}).y(function(a){return R(a.id)(a.value)});return function(b){var d=lc(b.values);return ub(b)?a(d):"M "+ba(d[0].x)+" "+R(b.id)(d[0].value)}}(),G=e.svg.brush().on("brush",function(){C({withTransition:!1,withY:!1,withSubchart:!1,withUpdateXDomain:!0})}), +H=e.behavior.zoom().on("zoomstart",function(){H.altDomain=e.event.sourceEvent.altKey?l.orgDomain():null}).on("zoom",pa?od:null);G.update=function(){x&&x.select(".x.brush").call(this);return this};H.orgScaleExtent=function(){var a=uc?uc:[1,10];return[a[0],Math.max(va()/a[1],a[1])]};H.updateScaleExtent=function(){var a=l.orgDomain(),a=(a[1]-a[0])/(U[1]-U[0]),b=this.orgScaleExtent();this.scaleExtent([b[0]*a,b[1]*a]);return this};var Ma,eb,h,x,xa,X,db,bb=null,pb=null,U;g.focus=function(a){g.defocus(); e.selectAll(Ra(a)).filter(function(a){return rb(a.id)}).classed("focused",!0).transition().duration(100).style("opacity",1)};g.defocus=function(a){e.selectAll(Ra(a)).filter(function(a){return rb(a.id)}).classed("focused",!1).transition().duration(100).style("opacity",0.3)};g.revert=function(a){e.selectAll(Ra(a)).filter(function(a){return rb(a.id)}).classed("focused",!1).transition().duration(100).style("opacity",1)};g.show=function(a){e.selectAll(Ra(a)).transition().style("opacity",1)};g.hide=function(a){e.selectAll(Ra(a)).transition().style("opacity", -0)};g.unzoom=function(){F.clear().update();B({withUpdateXDomain:!0})};g.load=function(a){t(a.done)&&(a.done=function(){});"categories"in a&&ca&&(Ea=a.categories,J.categories(Ea));if("cacheIds"in a&&Sa(a.cacheIds))Pa(Ta(a.cacheIds),a.done);else if("data"in a)Pa(Ja(a.data),a.done);else if("url"in a)e.csv(a.url,function(b,d){Pa(Ja(d),a.done)});else if("rows"in a)Pa(Ja(Wb(a.rows)),a.done);else if("columns"in a)Pa(Ja(Xb(a.columns)),a.done);else throw Error("url or rows or columns is required.");};g.unload= -function(a){g.data.targets=g.data.targets.filter(function(b){return b.id!==a});e.selectAll(".target-"+a).transition().style("opacity",0).remove();ya&&(e.selectAll(".legend-item-"+a).remove(),gb(g.data.targets));0b.classes.indexOf(a)})});return L}; +0)};g.unzoom=function(){G.clear().update();C({withUpdateXDomain:!0})};g.load=function(a){r(a.done)&&(a.done=function(){});"categories"in a&&ca&&(Ea=a.categories,B.categories(Ea));if("cacheIds"in a&&Sa(a.cacheIds))Pa(Ta(a.cacheIds),a.done);else if("data"in a)Pa(Ja(a.data),a.done);else if("url"in a)e.csv(a.url,function(b,d){Pa(Ja(d),a.done)});else if("rows"in a)Pa(Ja(Wb(a.rows)),a.done);else if("columns"in a)Pa(Ja(Xb(a.columns)),a.done);else throw Error("url or rows or columns is required.");};g.unload= +function(a){g.data.targets=g.data.targets.filter(function(b){return b.id!==a});e.selectAll(".target-"+a).transition().style("opacity",0).remove();ya&&(e.selectAll(".legend-item-"+a).remove(),gb(g.data.targets));0b.classes.indexOf(a)})});return L}; g.data.get=function(a){a=g.data.getAsTarget(a);return n(a)?a.values.map(function(a){return a.value}):void 0};g.data.getAsTarget=function(a){var b=$a(function(b){return b.id===a});return 0