diff --git a/psd3.js b/psd3.js index 415b3d0..b8b2943 100644 --- a/psd3.js +++ b/psd3.js @@ -31,7 +31,8 @@ psd3.Graph = function(config) { drilldownTransitionDuration: 0, stroke: "white", strokeWidth: 2, - highlightColor: "orange" + highlightColor: "orange", + rotateLabel: false }; /*console.log("before defaults"); for(var property in config){ @@ -299,7 +300,16 @@ psd3.Pie.prototype.draw = function(svg, totalRadius, dataset, originalDataset, o var a = []; a[0] = arc.centroid(d)[0] - parentCentroid[0]; a[1] = arc.centroid(d)[1] - parentCentroid[1]; - return "translate(" + a + ")"; + var rotate = ""; + if(_this.config.rotateLabel === true){ + var rotateAngle = (d.endAngle + d.startAngle) / 2 * (180 / Math.PI) + 90; + //console.log("rotateAngle = " + rotateAngle); + var b = []; + b[0] = parentCentroid[0]; + b[1] = parentCentroid[1]; + rotate = "rotate( " + rotateAngle + ", " + b + ")"; + } + return "translate(" + a + ")" + rotate; }) .attr("text-anchor", "middle") .text(_this.textText) diff --git a/psd3.min.js b/psd3.min.js index 1018c0b..aca602f 100644 --- a/psd3.min.js +++ b/psd3.min.js @@ -1,2 +1,2 @@ -var psd3=psd3||{};psd3.Graph=function(i){var t=this;this.config=i,this.defaults={width:400,height:400,value:"value",inner:"inner",label:function(i){return i.data.value},tooltip:function(i){return void 0!==t.config.value?i[t.config.value]:i.value},transition:"linear",transitionDuration:1e3,donutRadius:0,gradient:!1,colors:d3.scale.category20(),labelColor:"black",drilldownTransition:"linear",drilldownTransitionDuration:0,stroke:"white",strokeWidth:2,highlightColor:"orange"};for(var n in this.defaults)this.defaults.hasOwnProperty(n)&&(i.hasOwnProperty(n)||(i[n]=this.defaults[n]))}; -var psd3=psd3||{};psd3.Pie=function(t){psd3.Graph.call(this,t),this.zoomStack=[];var i="top";void 0!==this.config.heading&&void 0!==this.config.heading.pos&&(i=this.config.heading.pos),"top"==i&&this.setHeading(),this.drawPie(t.data),"bottom"==i&&this.setHeading()},psd3.Pie.prototype=Object.create(psd3.Graph.prototype),psd3.Pie.prototype.constructor=psd3.Pie,psd3.Pie.prototype.findMaxDepth=function(t){if(null===t||void 0===t||t.length<1)return 0;for(var i,e=0,n=0;ne&&(e=o)}return i=1+e},psd3.Pie.prototype.setHeading=function(){void 0!==this.config.heading&&d3.select("#"+this.config.containerId).append("div").style("text-align","center").style("width",""+this.config.width+"px").style("padding-top","20px").style("padding-bottom","20px").append("strong").text(this.config.heading.text)},psd3.Pie.prototype.mouseover=function(t){d3.select("#"+_this.tooltipId).style("left",d3.event.clientX+window.scrollX+"px").style("top",d3.event.clientY+window.scrollY+"px").select("#value").html(_this.config.tooltip(t.data,_this.config.label)),d3.select("#"+_this.tooltipId).classed("psd3Hidden",!1),d3.select(t.path).style("fill",_this.config.highlightColor)},psd3.Pie.prototype.mouseout=function(t){d3.select("#"+_this.tooltipId).classed("psd3Hidden",!0),d3.select(t.path).style("fill",t.fill)},psd3.Pie.prototype.drawPie=function(t){if(!(null===t||void 0===t||t.length<1)){_this=this,_this.arcIndex=0;var i=d3.select("#"+_this.config.containerId).append("svg").attr("id",_this.config.containerId+"_svg").attr("width",_this.config.width).attr("height",_this.config.height);_this.tooltipId=_this.config.containerId+"_tooltip";var e=d3.select("#"+_this.config.containerId).append("div").attr("id",_this.tooltipId).attr("class","psd3Hidden psd3Tooltip");e.append("p").append("span").attr("id","value").text("100%");var n;n=_this.config.width>_this.config.height?_this.config.width/2:_this.config.height/2;var o=_this.config.donutRadius,s=_this.findMaxDepth(t),a=o+(n-o)/s,r=a-o;_this.draw(i,n,t,t,t.length,o,a,r,0,7920/7/180,[0,0])}},psd3.Pie.prototype.customArcTween=function(t){var i={startAngle:t.startAngle,endAngle:t.startAngle},e=d3.interpolate(i,t);return function(i){return t.arc(e(i))}},psd3.Pie.prototype.textTransform=function(t){return"translate("+t.arc.centroid(t)+")"},psd3.Pie.prototype.textTitle=function(t){return t.data[_this.config.value]},psd3.Pie.prototype.draw=function(t,i,e,n,o,s,a,r,d,h,c){if(_this=this,!(null===e||void 0===e||e.length<1)){psd3.Pie.prototype.textText=function(t){return _this.config.label(t)};var l=d3.layout.pie();l.sort(null),l.value(function(t){return t[_this.config.value]}),l.startAngle(d).endAngle(h);for(var p=[],g=0;ge&&(e=o)}return i=1+e},psd3.Pie.prototype.setHeading=function(){void 0!==this.config.heading&&d3.select("#"+this.config.containerId).append("div").style("text-align","center").style("width",""+this.config.width+"px").style("padding-top","20px").style("padding-bottom","20px").append("strong").text(this.config.heading.text)},psd3.Pie.prototype.mouseover=function(t){d3.select("#"+_this.tooltipId).style("left",d3.event.clientX+window.scrollX+"px").style("top",d3.event.clientY+window.scrollY+"px").select("#value").html(_this.config.tooltip(t.data,_this.config.label)),d3.select("#"+_this.tooltipId).classed("psd3Hidden",!1),d3.select(t.path).style("fill",_this.config.highlightColor)},psd3.Pie.prototype.mouseout=function(t){d3.select("#"+_this.tooltipId).classed("psd3Hidden",!0),d3.select(t.path).style("fill",t.fill)},psd3.Pie.prototype.drawPie=function(t){if(!(null===t||void 0===t||t.length<1)){_this=this,_this.arcIndex=0;var i=d3.select("#"+_this.config.containerId).append("svg").attr("id",_this.config.containerId+"_svg").attr("width",_this.config.width).attr("height",_this.config.height);_this.tooltipId=_this.config.containerId+"_tooltip";var e=d3.select("#"+_this.config.containerId).append("div").attr("id",_this.tooltipId).attr("class","psd3Hidden psd3Tooltip");e.append("p").append("span").attr("id","value").text("100%");var n;n=_this.config.width>_this.config.height?_this.config.width/2:_this.config.height/2;var o=_this.config.donutRadius,s=_this.findMaxDepth(t),a=o+(n-o)/s,r=a-o;_this.draw(i,n,t,t,t.length,o,a,r,0,7920/7/180,[0,0])}},psd3.Pie.prototype.customArcTween=function(t){var i={startAngle:t.startAngle,endAngle:t.startAngle},e=d3.interpolate(i,t);return function(i){return t.arc(e(i))}},psd3.Pie.prototype.textTransform=function(t){return"translate("+t.arc.centroid(t)+")"},psd3.Pie.prototype.textTitle=function(t){return t.data[_this.config.value]},psd3.Pie.prototype.draw=function(t,i,e,n,o,s,a,r,d,h,c){if(_this=this,!(null===e||void 0===e||e.length<1)){psd3.Pie.prototype.textText=function(t){return _this.config.label(t)};var l=d3.layout.pie();l.sort(null),l.value(function(t){return t[_this.config.value]}),l.startAngle(d).endAngle(h);for(var p=[],g=0;gpsd3 - Sunburst Chart }, transition: "bounce", transitionDuration: 1000, - donutRadius: 50 + donutRadius: 50, + rotateLabel: true }; var samplePie = new psd3.Pie(config); diff --git a/src/js/graph.js b/src/js/graph.js index e65c85c..50b6509 100644 --- a/src/js/graph.js +++ b/src/js/graph.js @@ -31,7 +31,8 @@ psd3.Graph = function(config) { drilldownTransitionDuration: 0, stroke: "white", strokeWidth: 2, - highlightColor: "orange" + highlightColor: "orange", + rotateLabel: false }; /*console.log("before defaults"); for(var property in config){ diff --git a/src/js/pie.js b/src/js/pie.js index b3176b6..28c850c 100644 --- a/src/js/pie.js +++ b/src/js/pie.js @@ -247,7 +247,16 @@ psd3.Pie.prototype.draw = function(svg, totalRadius, dataset, originalDataset, o var a = []; a[0] = arc.centroid(d)[0] - parentCentroid[0]; a[1] = arc.centroid(d)[1] - parentCentroid[1]; - return "translate(" + a + ")"; + var rotate = ""; + if (_this.config.rotateLabel === true) { + var rotateAngle = (d.endAngle + d.startAngle) / 2 * (180 / Math.PI) + 90; + //console.log("rotateAngle = " + rotateAngle); + var b = []; + b[0] = parentCentroid[0]; + b[1] = parentCentroid[1]; + rotate = "rotate( " + rotateAngle + ", " + b + ")"; + } + return "translate(" + a + ")" + rotate; }) .attr("text-anchor", "middle") .text(_this.textText)