supports rotated labels

pshivale · Sep 13, 2016 · 07aad56 · 07aad56
1 parent 6171dab
commit 07aad56
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git 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
diff --git a/samples/sunburst_chart.html b/samples/sunburst_chart.html
@@ -138,7 +138,8 @@ <h2><a href="../index.html">psd3</a> - Sunburst Chart</h2>
             },
             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
@@ -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
@@ -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)