start dealing with labels

dankomong · Nov 28, 2014 · 21c545c · 21c545c
1 parent c475833
commit 21c545c
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 24 deletions.
diff --git a/src/js/example.js b/src/js/example.js
@@ -5,34 +5,36 @@ innerRadius = outerRadius - 24,
 pi = Math.PI;
 
 var data = [
-    {len: 249250621, color: 'rgb(153,102,0)'},
-    {len: 243199373, color: 'rgb(102,102,0)'},
-    {len: 198022430, color: 'rgb(153,153,30)'},
-    {len: 191154276, color: 'rgb(204,0,0)'},
-    {len: 180915260, color: 'rgb(255,0,0)'},
-    {len: 171115067, color: 'rgb(255,0,204)'},
-    {len: 159138663, color: 'rgb(255,204,204)'},
-    {len: 146364022, color: 'rgb(255,153,0)'},
-    {len: 141213431, color: 'rgb(255,204,0)'},
-    {len: 135534747, color: 'rgb(255,255,0)'},
-    {len: 135006516, color: 'rgb(204,255,0)'},
-    {len: 133851895, color: 'rgb(0,255,0)'},
-    {len: 115169878, color: 'rgb(53,128,0)'},
-    {len: 107349540, color: 'rgb(0,0,204)'},
-    {len: 102531392, color: 'rgb(102,153,255)'},
-    {len: 90354753, color: 'rgb(153,204,255)'},
-    {len: 81195210, color: 'rgb(0,255,255)'},
-    {len: 78077248, color: 'rgb(204,255,255)'},
-    {len: 59128983, color: 'rgb(153,0,204)'},
-    {len: 63025520, color: 'rgb(204,51,255)'},
-    {len: 48129895, color: 'rgb(204,153,255)'},
-    {len: 51304566, color: 'rgb(102,102,102)'},
-    {len: 155270560, color: 'rgb(153,153,153)'},
-    {len: 59373566, color: 'rgb(204,204,204)'},
+    {len: 249250621, color: 'rgb(153,102,0)', label: 'chr1'},
+    {len: 243199373, color: 'rgb(102,102,0)', label: 'chr2'},
+    {len: 198022430, color: 'rgb(153,153,30)', label: 'chr3'},
+    {len: 191154276, color: 'rgb(204,0,0)', label: 'chr4'},
+    {len: 180915260, color: 'rgb(255,0,0)', label: 'chr5'},
+    {len: 171115067, color: 'rgb(255,0,204)', label: 'chr6'},
+    {len: 159138663, color: 'rgb(255,204,204)', label: 'chr7'},
+    {len: 146364022, color: 'rgb(255,153,0)', label: 'chr8'},
+    {len: 141213431, color: 'rgb(255,204,0)', label: 'chr9'},
+    {len: 135534747, color: 'rgb(255,255,0)', label: 'chr10'},
+    {len: 135006516, color: 'rgb(204,255,0)', label: 'chr11'},
+    {len: 133851895, color: 'rgb(0,255,0)', label: 'chr12'},
+    {len: 115169878, color: 'rgb(53,128,0)', label: 'chr13'},
+    {len: 107349540, color: 'rgb(0,0,204)', label: 'chr14'},
+    {len: 102531392, color: 'rgb(102,153,255)', label: 'chr5'},
+    {len: 90354753, color: 'rgb(153,204,255)', label: 'chr16'},
+    {len: 81195210, color: 'rgb(0,255,255)', label: 'chr17'},
+    {len: 78077248, color: 'rgb(204,255,255)', label: 'chr18'},
+    {len: 59128983, color: 'rgb(153,0,204)', label: 'chr19'},
+    {len: 63025520, color: 'rgb(204,51,255)', label: 'chr20'},
+    {len: 48129895, color: 'rgb(204,153,255)', label: 'chr21'},
+    {len: 51304566, color: 'rgb(102,102,102)', label: 'chr22'},
+    {len: 155270560, color: 'rgb(153,153,153)', label: 'chrX'},
+    {len: 59373566, color: 'rgb(204,204,204)', label: 'chrY'},
 ];
 var chart = layout()
     .innerRadius(innerRadius)
     .outerRadius(outerRadius)
+    .labelPosition('center')
+    .labelRadialOffset(25)
     .gap(0.05).gapUnit('rad');
 d3.select('#chart')
     .selectAll('svg')

diff --git a/src/js/layout.js b/src/js/layout.js
@@ -2,6 +2,8 @@ function layout() {
     var innerRadius = 50,
     outerRadius = 80,
     gap = 0.04,
+    labelPosition = 'center',
+    labelRadialOffset = 0,
     gapUnit = 'rad',
     dataTotalLength = 0,
     radialLabels = segmentLabels = [];
@@ -36,6 +38,26 @@ function layout() {
             // Unique id so that the text path defs are unique - is there a better way to do this?
             var id = d3.selectAll(".circos-layout")[0].length;
 
+            //labels
+            var r = innerRadius + labelRadialOffset;
+            labels = svg.append("g")
+                .classed("labels", true)
+                .classed("segment", true)
+                .attr("transform", "translate(" + parseInt(offset) + "," + parseInt(offset) + ")");
+
+            labels.append("def")
+                .append("path")
+                .attr("id", "segment-label-path-"+id)
+                .attr("d", "m0 -" + r + " a" + r + " " + r + " 0 1 1 -1 0");
+
+            labels.selectAll("text")
+                .data(data).enter()
+                .append("text")
+                .append("textPath")
+                .attr("xlink:href", "#segment-label-path-"+id)
+                .attr("startOffset", getLabelStartOffset)
+                .text(function(d) {return d.label;});
+
         });
 
     }
@@ -60,6 +82,15 @@ function layout() {
         }
     }
 
+    getLabelStartOffset = function(d, i) {
+        if(labelPosition === 'center'){
+            return (d.start+d.len/3)/dataTotalLength*100 + "%";
+        }
+        else{
+            return d.start/dataTotalLength*100 + "%";
+        }
+    }
+
     /* Configuration getters/setters */
     chart.innerRadius = function(_) {
         if (!arguments.length) return innerRadius;
@@ -73,6 +104,18 @@ function layout() {
         return chart;
     };
 
+    chart.labelPosition = function(_) {
+        if (!arguments.length) return labelPosition;
+        labelPosition = _;
+        return chart;
+    };
+
+    chart.labelRadialOffset = function(_) {
+        if (!arguments.length) return labelRadialOffset;
+        labelRadialOffset = _;
+        return chart;
+    };
+
     chart.gap = function(_) {
         if (!arguments.length) return gap;
         gap = _;