From 63edd6d08a3a14aaf3afd686f5ae0467a4698c4c Mon Sep 17 00:00:00 2001
From: Masayuki Tanaka <masayuki0812@mac.com>
Date: Thu, 31 Jul 2014 16:43:31 +0100
Subject: [PATCH] Ref CLASS key

---
 c3.js | 654 ++++++++++++++++++++++++++++++++--------------------------
 1 file changed, 363 insertions(+), 291 deletions(-)

diff --git a/c3.js b/c3.js
index 515697f..f77b690 100644
--- a/c3.js
+++ b/c3.js
@@ -395,14 +395,14 @@
 
             if (! text) {
                 title = titleFormat ? titleFormat(d[i].x) : d[i].x;
-                text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
+                text = "<table class='" + CLASS[tooltip] + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
             }
 
             name = nameFormat(d[i].name);
             value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
             bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
 
-            text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
+            text += "<tr class='" + CLASS[tooltipName] + "-" + d[i].id + "'>";
             text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
             text += "<td class='value'>" + value + "</td>";
             text += "</tr>";
@@ -660,51 +660,51 @@
 
         // text when empty
         main.append("text")
-            .attr("class", CLASS.text + ' ' + CLASS.empty)
+            .attr("class", CLASS[text] + ' ' + CLASS[empty])
             .attr("text-anchor", "middle") // horizontal centering of text at x position in all browsers.
             .attr("dominant-baseline", "middle"); // vertical centering of text at y position in all browsers, except IE.
 
         // Regions
         main.append('g')
             .attr("clip-path", $$.clipPath)
-            .attr("class", CLASS.regions);
+            .attr("class", CLASS[regions]);
 
         // Grids
         $$.grid = main.append('g')
             .attr("clip-path", $$.clipPath)
-            .attr('class', CLASS.grid);
+            .attr('class', CLASS[grid]);
         if (config[__grid_x_show]) {
-            $$.grid.append("g").attr("class", CLASS.xgrids);
+            $$.grid.append("g").attr("class", CLASS[xgrids]);
         }
         if (config[__grid_y_show]) {
-            $$.grid.append('g').attr('class', CLASS.ygrids);
+            $$.grid.append('g').attr('class', CLASS[ygrids]);
         }
-        $$.grid.append('g').attr("class", CLASS.xgridLines);
-        $$.grid.append('g').attr('class', CLASS.ygridLines);
+        $$.grid.append('g').attr("class", CLASS[xgridLines]);
+        $$.grid.append('g').attr('class', CLASS[ygridLines]);
         if (config[__grid_focus_show]) {
             $$.grid.append('g')
-                .attr("class", CLASS.xgridFocus)
+                .attr("class", CLASS[xgridFocus])
               .append('line')
-                .attr('class', CLASS.xgridFocus);
+                .attr('class', CLASS[xgridFocus]);
         }
 
         // Define g for chart area
         main.append('g')
             .attr("clip-path", $$.clipPath)
-            .attr('class', CLASS.chart);
+            .attr('class', CLASS[chart]);
 
         // Cover whole with rects for events
-        eventRect = main.select('.' + CLASS.chart).append("g")
-            .attr("class", CLASS.eventRects)
+        eventRect = main.select('.' + CLASS[chart]).append("g")
+            .attr("class", CLASS[eventRects])
             .style('fill-opacity', 0);
 
         // Define g for bar chart area
-        main.select('.' + CLASS.chart).append("g")
-            .attr("class", CLASS.chartBars);
+        main.select('.' + CLASS[chart]).append("g")
+            .attr("class", CLASS[chartBars]);
 
         // Define g for line chart area
-        main.select('.' + CLASS.chart).append("g")
-            .attr("class", CLASS.chartLines);
+        main.select('.' + CLASS[chart]).append("g")
+            .attr("class", CLASS[chartLines]);
 
         // Define g for arc chart area
         if (isFunction($$.initArc)) {
@@ -714,12 +714,12 @@
             $$.initGauge();
         }
 
-        main.select('.' + CLASS.chart).append("g")
-            .attr("class", CLASS.chartTexts);
+        main.select('.' + CLASS[chart]).append("g")
+            .attr("class", CLASS[chartTexts]);
 
         // if zoom privileged, insert rect to forefront
-        main.insert('rect', config[__zoom_privileged] ? null : 'g.' + CLASS.regions)
-            .attr('class', CLASS.zoomRect)
+        main.insert('rect', config[__zoom_privileged] ? null : 'g.' + CLASS[regions])
+            .attr('class', CLASS[zoomRect])
             .attr('width', $$.width)
             .attr('height', $$.height)
             .style('opacity', 0)
@@ -732,32 +732,32 @@
 
         // Add Axis
         $$.axes.x = main.append("g")
-            .attr("class", CLASS.axis + ' ' + CLASS.axisX)
+            .attr("class", CLASS[axis] + ' ' + CLASS[axisX])
             .attr("clip-path", $$.clipPathForXAxis)
             .attr("transform", $$.translate.x)
             .style("visibility", config[__axis_x_show] ? 'visible' : 'hidden');
         $$.axes.x.append("text")
-            .attr("class", CLASS.axisXLabel)
+            .attr("class", CLASS[axisXLabel])
             .attr("transform", config[__axis_rotated] ? "rotate(-90)" : "")
             .style("text-anchor", generateCall($$.textAnchorForXAxisLabel, $$));
 
         $$.axes.y = main.append("g")
-            .attr("class", CLASS.axis + ' ' + CLASS.axisY)
+            .attr("class", CLASS[axis] + ' ' + CLASS[axisY])
             .attr("clip-path", $$.clipPathForYAxis)
             .attr("transform", $$.translate.y)
             .style("visibility", config[__axis_y_show] ? 'visible' : 'hidden');
         $$.axes.y.append("text")
-            .attr("class", CLASS.axisYLabel)
+            .attr("class", CLASS[axisYLabel])
             .attr("transform", config[__axis_rotated] ? "" : "rotate(-90)")
             .style("text-anchor", generateCall($$.textAnchorForYAxisLabel, $$));
 
         $$.axes.y2 = main.append("g")
-            .attr("class", CLASS.axis + ' ' + CLASS.axisY2)
+            .attr("class", CLASS[axis] + ' ' + CLASS[axisY2])
             // clip-path?
             .attr("transform", $$.translate.y2)
             .style("visibility", config[__axis_y2_show] ? 'visible' : 'hidden');
         $$.axes.y2.append("text")
-            .attr("class", CLASS.axisY2Label)
+            .attr("class", CLASS[axisY2Label])
             .attr("transform", config[__axis_rotated] ? "" : "rotate(-90)")
             .style("text-anchor", generateCall($$.textAnchorForY2AxisLabel, $$));
 
@@ -913,7 +913,7 @@
         /*-- Main --*/
 
         //-- Text --//
-        mainTextUpdate = main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText)
+        mainTextUpdate = main.select('.' + CLASS[chartTexts]).selectAll('.' + CLASS[chartText])
             .data(targets)
             .attr('class', generateCall($$.classChartText, $$));
         mainTextEnter = mainTextUpdate.enter().append('g')
@@ -924,7 +924,7 @@
             .attr('class', generateCall($$.classTexts, $$));
 
         //-- Bar --//
-        mainBarUpdate = main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
+        mainBarUpdate = main.select('.' + CLASS[chartBars]).selectAll('.' + CLASS[chartBar])
             .data(targets)
             .attr('class', generateCall($$.classChartBar, $$));
         mainBarEnter = mainBarUpdate.enter().append('g')
@@ -937,7 +937,7 @@
             .style("cursor", function (d) { return config[__data_selection_isselectable](d) ? "pointer" : null; });
 
         //-- Line --//
-        mainLineUpdate = main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
+        mainLineUpdate = main.select('.' + CLASS[chartLines]).selectAll('.' + CLASS[chartLine])
             .data(targets)
             .attr('class', generateCall($$.classChartLine, $$));
         mainLineEnter = mainLineUpdate.enter().append('g')
@@ -952,13 +952,13 @@
             .attr('class', generateCall($$.classAreas, $$));
         // Circles for each data point on lines
         mainLineEnter.append('g')
-            .attr("class", function (d) { return $$.generateClass(CLASS.selectedCircles, d.id); });
+            .attr("class", function (d) { return $$.generateClass(CLASS[selectedCircles], d.id); });
         mainLineEnter.append('g')
             .attr("class", generateCall($$.classCircles, $$))
             .style("cursor", function (d) { return config[__data_selection_isselectable](d) ? "pointer" : null; });
         // Update date for selected circles
         targets.forEach(function (t) {
-            main.selectAll('.' + CLASS.selectedCircles + $$.getTargetSelectorSuffix(t.id)).selectAll('.' + CLASS.selectedCircle).each(function (d) {
+            main.selectAll('.' + CLASS[selectedCircles] + $$.getTargetSelectorSuffix(t.id)).selectAll('.' + CLASS[selectedCircle]).each(function (d) {
                 d.value = t.values[d.index].value;
             });
         });
@@ -975,7 +975,7 @@
         /*-- Show --*/
 
         // Fade-in each chart
-        $$.svg.selectAll('.' + CLASS.target).filter(function (d) { return $$.isTargetToShow(d.id); })
+        $$.svg.selectAll('.' + CLASS[target]).filter(function (d) { return $$.isTargetToShow(d.id); })
           .transition().duration(config[__transition_duration])
             .style("opacity", 1);
     };
@@ -1059,14 +1059,14 @@
                         break;
                     }
                 }
-                $$.svg.selectAll('.' + CLASS.axisX + ' .tick text').each(function (e) {
+                $$.svg.selectAll('.' + CLASS[axisX] + ' .tick text').each(function (e) {
                     var index = tickValues.indexOf(e);
                     if (index >= 0) {
                         d3.select(this).style('display', index % intervalForCulling ? 'none' : 'block');
                     }
                 });
             } else {
-                $$.svg.selectAll('.' + CLASS.axisX + ' .tick text').style('display', 'block');
+                $$.svg.selectAll('.' + CLASS[axisX] + ' .tick text').style('display', 'block');
             }
         }
 
@@ -1093,7 +1093,7 @@
         $$.updateXgridFocus();
 
         // Data empty label positioning and text.
-        main.select("text." + CLASS.text + '.' + CLASS.empty)
+        main.select("text." + CLASS[text] + '.' + CLASS[empty])
             .attr("x", $$.width / 2)
             .attr("y", $$.height / 2)
             .text(config[__data_empty_label_text])
@@ -1101,7 +1101,7 @@
             .style('opacity', targetsToShow.length ? 0 : 1);
 
         // grid
-        main.select('line.' + CLASS.xgridFocus).style("visibility", "hidden");
+        main.select('line.' + CLASS[xgridFocus]).style("visibility", "hidden");
         if (config[__grid_x_show]) {
             xgridAttr = config[__axis_rotated] ? {
                 'x1': 0,
@@ -1118,9 +1118,9 @@
             flushXGrid = function (withoutUpdate) {
                 xgridData = $$.generateGridData(config[__grid_x_type], $$.x);
                 tickOffset = $$.isCategorized ? $$.xAxis.tickOffset() : 0;
-                xgrid = main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
+                xgrid = main.select('.' + CLASS[xgrids]).selectAll('.' + CLASS[xgrid])
                     .data(xgridData);
-                xgrid.enter().append('line').attr("class", CLASS.xgrid);
+                xgrid.enter().append('line').attr("class", CLASS[xgrid]);
                 if (!withoutUpdate) {
                     xgrid.attr(xgridAttr)
                         .style("opacity", function () { return +d3.select(this).attr(config[__axis_rotated] ? 'y1' : 'x1') === (config[__axis_rotated] ? $$.height : 0) ? 0 : 1; });
@@ -1129,11 +1129,11 @@
             };
             flushXGrid();
         }
-        xgridLines = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine)
+        xgridLines = main.select('.' + CLASS[xgridLines]).selectAll('.' + CLASS[xgridLine])
             .data(config[__grid_x_lines]);
         // enter
         xgridLine = xgridLines.enter().append('g')
-            .attr("class", function (d) { return CLASS.xgridLine + (d.class ? ' ' + d.class : ''); });
+            .attr("class", function (d) { return CLASS[xgridLine] + (d.class ? ' ' + d.class : ''); });
         xgridLine.append('line')
             .style("opacity", 0);
         xgridLine.append('text')
@@ -1150,10 +1150,10 @@
             .remove();
         // Y-Grid
         if (withY && config[__grid_y_show]) {
-            ygrid = main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
+            ygrid = main.select('.' + CLASS[ygrids]).selectAll('.' + CLASS[ygrid])
                 .data($$.y.ticks(config[__grid_y_ticks]));
             ygrid.enter().append('line')
-                .attr('class', CLASS.ygrid);
+                .attr('class', CLASS[ygrid]);
             ygrid.attr("x1", config[__axis_rotated] ? $$.y : 0)
                 .attr("x2", config[__axis_rotated] ? $$.y : $$.width)
                 .attr("y1", config[__axis_rotated] ? 0 : $$.y)
@@ -1162,11 +1162,11 @@
             $$.smoothLines(ygrid, 'grid');
         }
         if (withY) {
-            ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
+            ygridLines = main.select('.' + CLASS[ygridLines]).selectAll('.' + CLASS[ygridLine])
                 .data(config[__grid_y_lines]);
             // enter
             ygridLine = ygridLines.enter().append('g')
-                .attr("class", function (d) { return CLASS.ygridLine + (d.class ? ' ' + d.class : ''); });
+                .attr("class", function (d) { return CLASS[ygridLine] + (d.class ? ' ' + d.class : ''); });
             ygridLine.append('line')
                 .style("opacity", 0);
             ygridLine.append('text')
@@ -1197,7 +1197,7 @@
         }
 
         // rect for regions
-        mainRegion = main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
+        mainRegion = main.select('.' + CLASS[regions]).selectAll('.' + CLASS[region])
             .data(config[__regions]);
         mainRegion.enter().append('g')
             .attr('class', generateCall($$.classRegion, $$))
@@ -1208,7 +1208,7 @@
             .remove();
 
         // bars
-        mainBar = main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
+        mainBar = main.selectAll('.' + CLASS[bars]).selectAll('.' + CLASS[bar])
             .data(generateCall($$.barData, $$));
         mainBar.enter().append('path')
             .attr("class", generateCall($$.classBar, $$))
@@ -1221,7 +1221,7 @@
             .remove();
 
         // lines, areas and cricles
-        mainLine = main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
+        mainLine = main.selectAll('.' + CLASS[lines]).selectAll('.' + CLASS[line])
             .data(generateCall($$.lineData, $$));
         mainLine.enter().append('path')
             .attr('class', generateCall($$.classLine, $$))
@@ -1233,7 +1233,7 @@
             .style('opacity', 0)
             .remove();
 
-        mainArea = main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
+        mainArea = main.selectAll('.' + CLASS[areas]).selectAll('.' + CLASS[area])
             .data(generateCall($$.lineData, $$));
         mainArea.enter().append('path')
             .attr("class", generateCall($$.classArea, $$))
@@ -1246,7 +1246,7 @@
             .remove();
 
         if (config[__point_show]) {
-            mainCircle = main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
+            mainCircle = main.selectAll('.' + CLASS[circles]).selectAll('.' + CLASS[circle])
                 .data(generateCall($$.lineOrScatterData, $$));
             mainCircle.enter().append("circle")
                 .attr("class", generateCall($$.classCircle, $$))
@@ -1258,7 +1258,7 @@
         }
 
         if ($$.hasDataLabel()) {
-            mainText = main.selectAll('.' + CLASS.texts).selectAll('.' + CLASS.text)
+            mainText = main.selectAll('.' + CLASS[texts]).selectAll('.' + CLASS[text])
                 .data(generateCall($$.barOrLineData, $$));
             mainText.enter().append('text')
                 .attr("class", generateCall($$.classText, $$))
@@ -1285,23 +1285,23 @@
         }
 
         // circles for select
-        main.selectAll('.' + CLASS.selectedCircles)
+        main.selectAll('.' + CLASS[selectedCircles])
             .filter(generateCall($$.isBarType, $$))
             .selectAll('circle')
             .remove();
 
         if (config[__interaction_enabled]) {
             // rect for mouseover
-            eventRect = main.select('.' + CLASS.eventRects)
+            eventRect = main.select('.' + CLASS[eventRects])
                 .style('cursor', config[__zoom_enabled] ? config[__axis_rotated] ? 'ns-resize' : 'ew-resize' : null);
             if (notEmpty(config[__data_xs]) && !$$.isSingleX(config[__data_xs])) {
 
-                if (!eventRect.classed(CLASS.eventRectsMultiple)) {
-                    eventRect.classed(CLASS.eventRectsMultiple, true).classed(CLASS.eventRectsSingle, false)
-                        .selectAll('.' + CLASS.eventRect).remove();
+                if (!eventRect.classed(CLASS[eventRectsMultiple])) {
+                    eventRect.classed(CLASS[eventRectsMultiple], true).classed(CLASS[eventRectsSingle], false)
+                        .selectAll('.' + CLASS[eventRect]).remove();
                 }
 
-                eventRectUpdate = main.select('.' + CLASS.eventRects).selectAll('.' + CLASS.eventRect)
+                eventRectUpdate = main.select('.' + CLASS[eventRects]).selectAll('.' + CLASS[eventRect])
                     .data([0]);
                 // enter : only one rect will be added
                 $$.generateEventRectsForMultipleXs(eventRectUpdate.enter());
@@ -1314,9 +1314,9 @@
                 // exit : not needed because always only one rect exists
             } else {
 
-                if (!eventRect.classed(CLASS.eventRectsSingle)) {
-                    eventRect.classed(CLASS.eventRectsMultiple, false).classed(CLASS.eventRectsSingle, true)
-                        .selectAll('.' + CLASS.eventRect).remove();
+                if (!eventRect.classed(CLASS[eventRectsSingle])) {
+                    eventRect.classed(CLASS[eventRectsMultiple], false).classed(CLASS[eventRectsSingle], true)
+                        .selectAll('.' + CLASS[eventRect]).remove();
                 }
 
                 if (($$.isCustomX() || $$.isTimeSeries) && !$$.isCategorized) {
@@ -1337,10 +1337,10 @@
                 }
                 // Set data
                 maxDataCountTarget = $$.getMaxDataCountTarget($$.data.targets);
-                main.select('.' + CLASS.eventRects)
+                main.select('.' + CLASS[eventRects])
                     .datum(maxDataCountTarget ? maxDataCountTarget.values : []);
                 // Update rects
-                eventRectUpdate = main.select('.' + CLASS.eventRects).selectAll('.' + CLASS.eventRect)
+                eventRectUpdate = main.select('.' + CLASS[eventRects]).selectAll('.' + CLASS[eventRect])
                     .data(function (d) { return d; });
                 // enter
                 $$.generateEventRectsForSingleX(eventRectUpdate.enter());
@@ -1381,7 +1381,7 @@
                 .style("fill", $$.color)
                 .attr("cx", cx)
                 .attr("cy", cy));
-            transitions.push(main.selectAll('.' + CLASS.selectedCircle).transition()
+            transitions.push(main.selectAll('.' + CLASS[selectedCircle]).transition()
                 .attr("cx", cx)
                 .attr("cy", cy));
             transitions.push(mainText.transition()
@@ -1477,14 +1477,14 @@
                 // remove flowed elements
                 if (flowLength) {
                     for (i = 0; i < flowLength; i++) {
-                        shapes.push('.' + CLASS.shape + '-' + (flowIndex + i));
-                        texts.push('.' + CLASS.text + '-' + (flowIndex + i));
-                        eventRects.push('.' + CLASS.eventRect + '-' + (flowIndex + i));
+                        shapes.push('.' + CLASS[shape] + '-' + (flowIndex + i));
+                        texts.push('.' + CLASS[text] + '-' + (flowIndex + i));
+                        eventRects.push('.' + CLASS[eventRect] + '-' + (flowIndex + i));
                     }
-                    $$.svg.selectAll('.' + CLASS.shapes).selectAll(shapes).remove();
-                    $$.svg.selectAll('.' + CLASS.texts).selectAll(texts).remove();
-                    $$.svg.selectAll('.' + CLASS.eventRects).selectAll(eventRects).remove();
-                    $$.svg.select('.' + CLASS.xgrid).remove();
+                    $$.svg.selectAll('.' + CLASS[shapes]).selectAll(shapes).remove();
+                    $$.svg.selectAll('.' + CLASS[texts]).selectAll(texts).remove();
+                    $$.svg.selectAll('.' + CLASS[eventRects]).selectAll(eventRects).remove();
+                    $$.svg.select('.' + CLASS[xgrid]).remove();
                 }
 
                 // draw again for removing flowed elements and reverting attr
@@ -1626,7 +1626,7 @@
                 $$.expandBars(index);
 
                 // Call event handler
-                $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
+                $$.main.selectAll('.' + CLASS[shape] + '-' + index).each(function (d) {
                     config[__data_onmouseover].call(c3, d);
                 });
             })
@@ -1639,13 +1639,13 @@
                 $$.unexpandCircles(index);
                 $$.unexpandBars();
                 // Call event handler
-                $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
+                $$.main.selectAll('.' + CLASS[shape] + '-' + index).each(function (d) {
                     config[__data_onmouseout].call($$, d);
                 });
             })
             .on('mousemove', function (d) {
                 var selectedData, index = d.index,
-                    eventRect = $$.svg.select('.' + CLASS.eventRect + '-' + index);
+                    eventRect = $$.svg.select('.' + CLASS[eventRect] + '-' + index);
 
                 if ($$.dragging) { return; } // do nothing when dragging
                 if ($$.hasArcType($$.data.targets)) { return; }
@@ -1664,9 +1664,9 @@
                     return;
                 }
 
-                $$.main.selectAll('.' + CLASS.shape + '-' + index)
+                $$.main.selectAll('.' + CLASS[shape] + '-' + index)
                     .each(function () {
-                        d3.select(this).classed(CLASS.EXPANDED, true);
+                        d3.select(this).classed(CLASS[EXPANDED], true);
                         if (config[__data_selection_enabled]) {
                             eventRect.style('cursor', config[__data_selection_grouped] ? 'pointer' : null);
                         }
@@ -1706,7 +1706,7 @@
                     $$.cancelClick = false;
                     return;
                 }
-                $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) { $$.toggleShape(this, d, index); });
+                $$.main.selectAll('.' + CLASS[shape] + '-' + index).each(function (d) { $$.toggleShape(this, d, index); });
             })
             .call(
                 d3.behavior.drag().origin(Object)
@@ -1724,7 +1724,7 @@
             .attr('y', 0)
             .attr('width', $$.width)
             .attr('height', $$.height)
-            .attr('class', CLASS.eventRect)
+            .attr('class', CLASS[eventRect])
             .on('mouseout', function () {
                 if ($$.hasArcType($$.data.targets)) { return; }
                 $$.hideXGridFocus();
@@ -1766,13 +1766,13 @@
 
                 // Show cursor as pointer if point is close to mouse position
                 if ($$.dist(closest, mouse) < 100) {
-                    $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer');
+                    $$.svg.select('.' + CLASS[eventRect]).style('cursor', 'pointer');
                     if (!$$.mouseover) {
                         config[__data_onmouseover].call($$, closest);
                         $$.mouseover = true;
                     }
                 } else if ($$.mouseover) {
-                    $$.svg.select('.' + CLASS.eventRect).style('cursor', null);
+                    $$.svg.select('.' + CLASS[eventRect]).style('cursor', null);
                     config[__data_onmouseout].call($$, closest);
                     $$.mouseover = false;
                 }
@@ -1790,7 +1790,7 @@
 
                 // select if selection enabled
                 if ($$.dist(closest, mouse) < 100) {
-                    $$.main.select('.' + CLASS.circles + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.circle + '-' + closest.index).each(function () {
+                    $$.main.select('.' + CLASS[circles] + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS[circle] + '-' + closest.index).each(function () {
                         $$.toggleShape(this, closest, closest.index);
                     });
                 }
@@ -1845,26 +1845,26 @@
         if (transitions && transitions.axisX) {
             xAxis = transitions.axisX;
         } else {
-            xAxis  = $$.main.select('.' + CLASS.axisX);
+            xAxis  = $$.main.select('.' + CLASS[axisX]);
             if (withTransition) { xAxis = xAxis.transition(); }
         }
         if (transitions && transitions.axisY) {
             yAxis = transitions.axisY;
         } else {
-            yAxis = $$.main.select('.' + CLASS.axisY);
+            yAxis = $$.main.select('.' + CLASS[axisY]);
             if (withTransition) { yAxis = yAxis.transition(); }
         }
         if (transitions && transitions.axisY2) {
             y2Axis = transitions.axisY2;
         } else {
-            y2Axis = $$.main.select('.' + CLASS.axisY2);
+            y2Axis = $$.main.select('.' + CLASS[axisY2]);
             if (withTransition) { y2Axis = y2Axis.transition(); }
         }
         (withTransition ? $$.main.transition() : $$.main).attr("transform", $$.translate.main);
         xAxis.attr("transform", $$.translate.x);
         yAxis.attr("transform", $$.translate.y);
         y2Axis.attr("transform", $$.translate.y2);
-        $$.main.select('.' + CLASS.chartArcs).attr("transform", $$.translate.arc);
+        $$.main.select('.' + CLASS[chartArcs]).attr("transform", $$.translate.arc);
     };
     c3_chart_internal_fn.transformLegend = function (withTransition) {
         var $$ = this;
@@ -1894,7 +1894,7 @@
             .attr('y', function () { return $$.getYAxisClipY(); })
             .attr('width', function () { return $$.getYAxisClipWidth(); })
             .attr('height', function () { return $$.getYAxisClipHeight(); });
-        $$.svg.select('.' + CLASS.zoomRect)
+        $$.svg.select('.' + CLASS[zoomRect])
             .attr('width', $$.width)
             .attr('height', $$.height);
         // MEMO: parent div's height will be bigger than svg when <!DOCTYPE html>
@@ -2022,7 +2022,7 @@
 
     c3_chart_internal_fn.getSvgLeft = function () {
         var $$ = this, config = $$.config,
-            leftAxisClass = config[__axis_rotated] ? CLASS.axisX : CLASS.axisY,
+            leftAxisClass = config[__axis_rotated] ? CLASS[axisX] : CLASS[axisY],
             leftAxis = $$.main.select('.' + leftAxisClass).node(),
             svgRect = leftAxis ? leftAxis.getBoundingClientRect() : {right: 0},
             chartRect = $$.selectChart.node().getBoundingClientRect(),
@@ -2124,7 +2124,7 @@
         if (! config[__tooltip_show]) { return; }
         // Hide when scatter plot exists
         if ($$.hasScatterType($$.data.targets) || $$.hasArcType($$.data.targets)) { return; }
-        var focusEl = $$.main.selectAll('line.' + CLASS.xgridFocus);
+        var focusEl = $$.main.selectAll('line.' + CLASS[xgridFocus]);
         focusEl
             .style("visibility", "visible")
             .data([dataToShow[0]])
@@ -2133,11 +2133,11 @@
         $$.smoothLines(focusEl, 'grid');
     };
     c3_chart_internal_fn.hideXGridFocus = function () {
-        this.main.select('line.' + CLASS.xgridFocus).style("visibility", "hidden");
+        this.main.select('line.' + CLASS[xgridFocus]).style("visibility", "hidden");
     };
     c3_chart_internal_fn.updateXgridFocus = function () {
         var $$ = this, config = $$.config;
-        $$.main.select('line.' + CLASS.xgridFocus)
+        $$.main.select('line.' + CLASS[xgridFocus])
             .attr("x1", config[__axis_rotated] ? 0 : -10)
             .attr("x2", config[__axis_rotated] ? $$.width : -10)
             .attr("y1", config[__axis_rotated] ? -10 : 0)
@@ -2146,7 +2146,7 @@
     c3_chart_internal_fn.generateGridData = function (type, scale) {
         var $$ = this,
             gridData = [], xDomain, firstYear, lastYear, i,
-            tickNum = $$.main.select("." + CLASS.axisX).selectAll('.tick').size();
+            tickNum = $$.main.select("." + CLASS[axisX]).selectAll('.tick').size();
         if (type === 'year') {
             xDomain = $$.getXDomain();
             firstYear = xDomain[0].getFullYear();
@@ -2177,8 +2177,8 @@
         var $$ = this, config = $$.config,
             toRemove = $$.getGridFilterToRemove(params),
             toShow = function (line) { return !toRemove(line); },
-            classLines = forX ? CLASS.xgridLines : CLASS.ygridLines,
-            classLine = forX ? CLASS.xgridLine : CLASS.ygridLine;
+            classLines = forX ? CLASS[xgridLines] : CLASS[ygridLines],
+            classLine = forX ? CLASS[xgridLine] : CLASS.ygridLine;
         $$.main.select('.' + classLines).selectAll('.' + classLine).filter(toRemove)
             .transition().duration(config[__transition_duration])
             .style('opacity', 0).remove();
@@ -2221,15 +2221,15 @@
     };
     c3_chart_internal_fn.opacityForLegend = function (legendItem) {
         var $$ = this;
-        return legendItem.classed(CLASS.legendItemHidden) ? $$.legendOpacityForHidden : 1;
+        return legendItem.classed(CLASS[legendItemHidden]) ? $$.legendOpacityForHidden : 1;
     };
     c3_chart_internal_fn.opacityForUnfocusedLegend = function (legendItem) {
         var $$ = this;
-        return legendItem.classed(CLASS.legendItemHidden) ? $$.legendOpacityForHidden : 0.3;
+        return legendItem.classed(CLASS[legendItemHidden]) ? $$.legendOpacityForHidden : 0.3;
     };
     c3_chart_internal_fn.toggleFocusLegend = function (id, focus) {
         var $$ = this;
-        $$.legend.selectAll('.' + CLASS.legendItem)
+        $$.legend.selectAll('.' + CLASS[legendItem])
           .transition().duration(100)
             .style('opacity', function (_id) {
                 var This = $$.d3.select(this);
@@ -2242,7 +2242,7 @@
     };
     c3_chart_internal_fn.revertLegend = function () {
         var $$ = this, d3 = $$.d3;
-        $$.legend.selectAll('.' + CLASS.legendItem)
+        $$.legend.selectAll('.' + CLASS[legendItem])
           .transition().duration(100)
             .style('opacity', function () { return $$.opacityForLegend(d3.select(this)); });
     };
@@ -2275,7 +2275,7 @@
         var paddingTop = 4, paddingRight = 36, maxWidth = 0, maxHeight = 0, posMin = 10;
         var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0;
         var withTransition, withTransitionForTransform;
-        var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size();
+        var hasFocused = $$.legend.selectAll('.' + CLASS[legendItemFocused]).size();
         var texts, rects, tiles;
 
         options = options || {};
@@ -2283,7 +2283,7 @@
         withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
 
         function updatePositions(textElement, id, reset) {
-            var box = $$.getTextRect(textElement.textContent, CLASS.legendItem),
+            var box = $$.getTextRect(textElement.textContent, CLASS[legendItem]),
                 itemWidth = Math.ceil((box.width + paddingRight) / 10) * 10,
                 itemHeight = Math.ceil((box.height + paddingTop) / 10) * 10,
                 itemLength = $$.isLegendRight || $$.isLegendInset ? itemHeight : itemWidth,
@@ -2358,17 +2358,17 @@
         yForLegendRect = function (id, i) { return yForLegend(id, i) - 7; };
 
         // Define g for legend area
-        l = $$.legend.selectAll('.' + CLASS.legendItem)
+        l = $$.legend.selectAll('.' + CLASS[legendItem])
             .data(targetIds)
           .enter().append('g')
-            .attr('class', function (id) { return $$.generateClass(CLASS.legendItem, id); })
+            .attr('class', function (id) { return $$.generateClass(CLASS[legendItem], id); })
             .style('visibility', function (id) { return $$.isLegendToShow(id) ? 'visible' : 'hidden'; })
             .style('cursor', 'pointer')
             .on('click', function (id) {
                 isFunction(config[__legend_item_onclick]) ? config[__legend_item_onclick].call(c3, id) : $$.api.toggle(id);
             })
             .on('mouseover', function (id) {
-                $$.d3.select(this).classed(CLASS.legendItemFocused, true);
+                $$.d3.select(this).classed(CLASS[legendItemFocused], true);
                 if (!$$.transiting) {
                     $$.api.focus(id);
                 }
@@ -2377,7 +2377,7 @@
                 }
             })
             .on('mouseout', function (id) {
-                $$.d3.select(this).classed(CLASS.legendItemFocused, false);
+                $$.d3.select(this).classed(CLASS[legendItemFocused], false);
                 if (!$$.transiting) {
                     $$.api.revert();
                 }
@@ -2392,12 +2392,12 @@
             .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200)
             .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText);
         l.append('rect')
-            .attr("class", CLASS.legendItemEvent)
+            .attr("class", CLASS[legendItemEvent])
             .style('fill-opacity', 0)
             .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendRect : -200)
             .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendRect);
         l.append('rect')
-            .attr("class", CLASS.legendItemTile)
+            .attr("class", CLASS[legendItemTile])
             .style("pointer-events", "none")
             .style('fill', $$.color)
             .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200)
@@ -2406,8 +2406,8 @@
             .attr('height', 10);
         // Set background for inset legend
         if ($$.isLegendInset && maxWidth !== 0) {
-            $$.legend.insert('g', '.' + CLASS.legendItem)
-                .attr("class", CLASS.legendBackground)
+            $$.legend.insert('g', '.' + CLASS[legendItem])
+                .attr("class", CLASS[legendBackground])
               .append('rect')
                 .attr('height', $$.getLegendHeight() - 10)
                 .attr('width', maxWidth * (step + 1) + 10);
@@ -2421,7 +2421,7 @@
             .attr('x', xForLegendText)
             .attr('y', yForLegendText);
 
-        rects = $$.legend.selectAll('rect.' + CLASS.legendItemEvent)
+        rects = $$.legend.selectAll('rect.' + CLASS[legendItemEvent])
             .data(targetIds);
         (withTransition ? rects.transition() : rects)
             .attr('width', function (id) { return widths[id]; })
@@ -2429,7 +2429,7 @@
             .attr('x', xForLegendRect)
             .attr('y', yForLegendRect);
 
-        tiles = $$.legend.selectAll('rect.' + CLASS.legendItemTile)
+        tiles = $$.legend.selectAll('rect.' + CLASS[legendItemTile])
             .data(targetIds);
         (withTransition ? tiles.transition() : tiles)
             .style('fill', $$.color)
@@ -2437,13 +2437,13 @@
             .attr('y', yForLegend);
 
         // toggle legend state
-        $$.legend.selectAll('.' + CLASS.legendItem)
-            .classed(CLASS.legendItemHidden, function (id) { return !$$.isTargetToShow(id); })
+        $$.legend.selectAll('.' + CLASS[legendItem])
+            .classed(CLASS[legendItemHidden], function (id) { return !$$.isTargetToShow(id); })
             .transition()
             .style('opacity', function (id) {
                 var This = $$.d3.select(this);
                 if ($$.isTargetToShow(id)) {
-                    return !hasFocused || This.classed(CLASS.legendItemFocused) ? $$.opacityForLegend(This) : $$.opacityForUnfocusedLegend(This);
+                    return !hasFocused || This.classed(CLASS[legendItemFocused]) ? $$.opacityForLegend(This) : $$.opacityForUnfocusedLegend(This);
                 } else {
                     return $$.legendOpacityForHidden;
                 }
@@ -3041,7 +3041,7 @@
             // Reset fadein for future load
             $$.withoutFadeIn[id] = false;
             // Remove target's elements
-            $$.legend.selectAll('.' + CLASS.legendItem + $$.getTargetSelectorSuffix(id)).remove();
+            $$.legend.selectAll('.' + CLASS[legendItem] + $$.getTargetSelectorSuffix(id)).remove();
             // Remove target
             $$.data.targets = $$.data.targets.filter(function (t) {
                 return t.id !== id;
@@ -3127,19 +3127,19 @@
     };
     c3_chart_internal_fn.getCircles = function (i, id) {
         var $$ = this;
-        return (id ? $$.main.selectAll('.' + CLASS.circles + $$.getTargetSelectorSuffix(id)) : $$.main).selectAll('.' + CLASS.circle + (isValue(i) ? '-' + i : ''));
+        return (id ? $$.main.selectAll('.' + CLASS[circles] + $$.getTargetSelectorSuffix(id)) : $$.main).selectAll('.' + CLASS[circle] + (isValue(i) ? '-' + i : ''));
     };
     c3_chart_internal_fn.expandCircles = function (i, id) {
         var $$ = this;
         $$.getCircles(i, id)
-            .classed(CLASS.EXPANDED, true)
+            .classed(CLASS[EXPANDED], true)
             .attr('r', generateCall($$.pointExpandedR, $$));
     };
     c3_chart_internal_fn.unexpandCircles = function (i) {
         var $$ = this;
         $$.getCircles(i)
-            .filter(function () { return $$.d3.select(this).classed(CLASS.EXPANDED); })
-            .classed(CLASS.EXPANDED, false)
+            .filter(function () { return $$.d3.select(this).classed(CLASS[EXPANDED]); })
+            .classed(CLASS[EXPANDED], false)
             .attr('r', generateCall($$.pointR, $$));
     };
     c3_chart_internal_fn.pointR = function (d) {
@@ -3164,15 +3164,15 @@
     };
     c3_chart_internal_fn.getBars = function (i) {
         var $$ = this;
-        return $$.main.selectAll('.' + CLASS.bar + (isValue(i) ? '-' + i : ''));
+        return $$.main.selectAll('.' + CLASS[bar] + (isValue(i) ? '-' + i : ''));
     };
     c3_chart_internal_fn.expandBars = function (i) {
         var $$ = this;
-        $$.getBars(i).classed(CLASS.EXPANDED, true);
+        $$.getBars(i).classed(CLASS[EXPANDED], true);
     };
     c3_chart_internal_fn.unexpandBars = function (i) {
         var $$ = this;
-        $$.getBars(i).classed(CLASS.EXPANDED, false);
+        $$.getBars(i).classed(CLASS[EXPANDED], false);
     };
     c3_chart_internal_fn.generateDrawBar = function (barIndices, isSub) {
         var $$ = this, config = $$.config,
@@ -4221,9 +4221,9 @@
 
     c3_chart_internal_fn.updateAxisLabels = function (withTransition) {
         var $$ = this;
-        var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel),
-            axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel),
-            axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label);
+        var axisXLabel = $$.main.select('.' + CLASS[axisX] + ' .' + CLASS[axisXLabel]),
+            axisYLabel = $$.main.select('.' + CLASS[axisY] + ' .' + CLASS[axisYLabel]),
+            axisY2Label = $$.main.select('.' + CLASS[axisY2] + ' .' + CLASS[axisY2Label]);
         (withTransition ? axisXLabel.transition() : axisXLabel)
             .attr("x", generateCall($$.xForXAxisLabel, $$))
             .attr("dx", generateCall($$.dxForXAxisLabel, $$))
@@ -4449,8 +4449,8 @@
 
     c3_chart_internal_fn.expandArc = function (id, withoutFadeOut) {
         var $$ = this,
-            target = $$.svg.selectAll('.' + CLASS.chartArc + $$.selectorTarget(id)),
-            noneTargets = $$.svg.selectAll('.' + CLASS.arc).filter(function (data) { return data.data.id !== id; });
+            target = $$.svg.selectAll('.' + CLASS[chartArc] + $$.selectorTarget(id)),
+            noneTargets = $$.svg.selectAll('.' + CLASS[arc]).filter(function (data) { return data.data.id !== id; });
 
         if ($$.shouldExpand(id)) {
             target.selectAll('path')
@@ -4471,11 +4471,11 @@
 
     c3_chart_internal_fn.unexpandArc = function (id) {
         var $$ = this,
-            target = $$.svg.selectAll('.' + CLASS.chartArc + $$.selectorTarget(id));
-        target.selectAll('path.' + CLASS.arc)
+            target = $$.svg.selectAll('.' + CLASS[chartArc] + $$.selectorTarget(id));
+        target.selectAll('path.' + CLASS[arc])
           .transition().duration(50)
             .attr("d", $$.svgArc);
-        $$.svg.selectAll('.' + CLASS.arc)
+        $$.svg.selectAll('.' + CLASS[arc])
             .style("opacity", 1);
     };
 
@@ -4523,7 +4523,7 @@
 
     c3_chart_internal_fn.updateTargetsForArc = function (targets) {
         var $$ = this, main = $$.main, mainPieUpdate, mainPieEnter;
-        mainPieUpdate = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc)
+        mainPieUpdate = main.select('.' + CLASS[chartArcs]).selectAll('.' + CLASS[chartArc])
             .data($$.pie(targets))
             .attr("class", generateCall($$.classChartArc, $$));
         mainPieEnter = mainPieUpdate.enter().append("g")
@@ -4541,11 +4541,11 @@
 
     c3_chart_internal_fn.initArc = function () {
         var $$ = this, arcs;
-        arcs = $$.main.select('.' + CLASS.chart).append("g")
-            .attr("class", CLASS.chartArcs)
+        arcs = $$.main.select('.' + CLASS[chart]).append("g")
+            .attr("class", CLASS[chartArcs])
             .attr("transform", $$.translate.arc);
         arcs.append('text')
-            .attr('class', CLASS.chartArcsTitle)
+            .attr('class', CLASS[chartArcsTitle])
             .style("text-anchor", "middle")
             .text($$.getArcTitle());
     };
@@ -4553,7 +4553,7 @@
     c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransform) {
         var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main,
             mainArc;
-        mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
+        mainArc = main.selectAll('.' + CLASS[arcs]).selectAll('.' + CLASS[arc])
             .data(generateCall($$.arcData, $$));
         mainArc.enter().append('path')
             .attr("class", generateCall($$.classArc, $$))
@@ -4636,14 +4636,14 @@
         mainArc.exit().transition().duration(durationForExit)
             .style('opacity', 0)
             .remove();
-        main.selectAll('.' + CLASS.chartArc).select('text')
+        main.selectAll('.' + CLASS[chartArc]).select('text')
             .style("opacity", 0)
-            .attr('class', function (d) { return $$.isGaugeType(d.data) ? CLASS.gaugeValue : ''; })
+            .attr('class', function (d) { return $$.isGaugeType(d.data) ? CLASS[gaugeValue] : ''; })
             .text(generateCall($$.textForArcLabel, $$))
             .attr("transform", generateCall($$.transformForArcLabel, $$))
           .transition().duration(duration)
             .style("opacity", function (d) { return $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? 1 : 0; });
-        main.select('.' + CLASS.chartArcsTitle)
+        main.select('.' + CLASS[chartArcsTitle])
             .style("opacity", $$.hasDonutType($$.data.targets) || $$.hasGaugeType($$.data.targets) ? 1 : 0);
 
     };
@@ -4654,7 +4654,7 @@
         var $$ = this, config = $$.config, arcs;
         if ($$.hasGaugeType($$.data.targets)) {
             arcs.append('path')
-                .attr("class", CLASS.chartArcsBackground)
+                .attr("class", CLASS[chartArcsBackground])
                 .attr("d", function () {
                     var d = {
                         data: [{value: config[__gauge_max]}],
@@ -4665,21 +4665,21 @@
                 });
             arcs.append("text")
                 .attr("dy", ".75em")
-                .attr("class", CLASS.chartArcsGaugeUnit)
+                .attr("class", CLASS[chartArcsGaugeUnit])
                 .style("text-anchor", "middle")
                 .style("pointer-events", "none")
                 .text(config[__gauge_label_show] ? config[__gauge_units] : '');
             arcs.append("text")
                 .attr("dx", -1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / 2)) + "px")
                 .attr("dy", "1.2em")
-                .attr("class", CLASS.chartArcsGaugeMin)
+                .attr("class", CLASS[chartArcsGaugeMin])
                 .style("text-anchor", "middle")
                 .style("pointer-events", "none")
                 .text(config[__gauge_label_show] ? config[__gauge_min] : '');
             arcs.append("text")
                 .attr("dx", $$.innerRadius + (($$.radius - $$.innerRadius) / 2) + "px")
                 .attr("dy", "1.2em")
-                .attr("class", CLASS.chartArcsGaugeMax)
+                .attr("class", CLASS[chartArcsGaugeMax])
                 .style("text-anchor", "middle")
                 .style("pointer-events", "none")
                 .text(config[__gauge_label_show] ? config[__gauge_max] : '');
@@ -4713,7 +4713,7 @@
         var $$ = this, d3 = $$.d3;
         $$.brush = d3.svg.brush().on("brush", function () { $$.redrawForBrush(); });
         $$.brush.update = function () {
-            if ($$.context) { $$.context.select('.' + $$.CLASS.brush).call(this); }
+            if ($$.context) { $$.context.select('.' + $$.CLASS[brush]).call(this); }
             return this;
         };
         $$.brush.scale = function (scale) {
@@ -4731,20 +4731,20 @@
         // Define g for chart area
         context.append('g')
             .attr("clip-path", $$.clipPath)
-            .attr('class', CLASS.chart);
+            .attr('class', CLASS[chart]);
 
         // Define g for bar chart area
-        context.select('.' + CLASS.chart).append("g")
-            .attr("class", CLASS.chartBars);
+        context.select('.' + CLASS[chart]).append("g")
+            .attr("class", CLASS[chartBars]);
 
         // Define g for line chart area
-        context.select('.' + CLASS.chart).append("g")
-            .attr("class", CLASS.chartLines);
+        context.select('.' + CLASS[chart]).append("g")
+            .attr("class", CLASS[chartLines]);
 
         // Add extent rect for Brush
         context.append("g")
             .attr("clip-path", $$.clipPath)
-            .attr("class", CLASS.brush)
+            .attr("class", CLASS[brush])
             .call($$.brush)
           .selectAll("rect")
             .attr(config[__axis_rotated] ? "width" : "height", config[__axis_rotated] ? $$.width2 : $$.height2);
@@ -4752,7 +4752,7 @@
         // ATTENTION: This must be called AFTER chart added
         // Add Axis
         $$.axes.subx = context.append("g")
-            .attr("class", CLASS.axisX)
+            .attr("class", CLASS[axisX])
             .attr("transform", $$.translate.subx)
             .attr("clip-path", config[__axis_rotated] ? "" : $$.clipPathForXAxis);
     };
@@ -4762,7 +4762,7 @@
 
         if (config[__subchart_show]) {
 
-            contextBarUpdate = context.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
+            contextBarUpdate = context.select('.' + CLASS[chartBars]).selectAll('.' + CLASS[chartBar])
                 .data(targets)
                 .attr('class', generateCall($$.classChartBar, $$));
             contextBarEnter = contextBarUpdate.enter().append('g')
@@ -4773,7 +4773,7 @@
                 .attr("class", generateCall($$.classBars, $$));
 
             //-- Line --//
-            contextLineUpdate = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
+            contextLineUpdate = context.select('.' + CLASS[chartLines]).selectAll('.' + CLASS[chartLine])
                 .data(targets)
                 .attr('class', generateCall($$.classChartLine, $$));
             contextLineEnter = contextLineUpdate.enter().append('g')
@@ -4814,7 +4814,7 @@
                 drawBarOnSub = $$.generateDrawBar(barIndices, true);
                 drawLineOnSub = $$.generateDrawLine(lineIndices, true);
                 // bars
-                contextBar = context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
+                contextBar = context.selectAll('.' + CLASS[bars]).selectAll('.' + CLASS[bar])
                     .data(generateCall($$.barData, $$));
                 contextBar.enter().append('path')
                     .attr("class", generateCall($$.classBar, $$))
@@ -4829,7 +4829,7 @@
                     .style('opacity', 0)
                     .remove();
                 // lines
-                contextLine = context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
+                contextLine = context.selectAll('.' + CLASS[lines]).selectAll('.' + CLASS[line])
                     .data(generateCall($$.lineData, $$));
                 contextLine.enter().append('path')
                     .attr('class', generateCall($$.classLine, $$))
@@ -4843,7 +4843,7 @@
                     .style('opacity', 0)
                     .remove();
                 // area
-                contextArea = context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
+                contextArea = context.selectAll('.' + CLASS[areas]).selectAll('.' + CLASS[area])
                     .data(generateCall($$.lineData, $$));
                 contextArea.enter().append('path')
                     .attr("class", generateCall($$.classArea, $$))
@@ -4876,7 +4876,7 @@
         if (transitions && transitions.axisSubX) {
             subXAxis = transitions.axisSubX;
         } else {
-            subXAxis = $$.context.select('.' + CLASS.axisX);
+            subXAxis = $$.context.select('.' + CLASS[axisX]);
             if (withTransition) { subXAxis = subXAxis.transition(); }
         }
         $$.context.attr("transform", $$.translate.context);
@@ -4889,8 +4889,8 @@
      */
     c3_chart_internal_fn.updateZoom = function () {
         var $$ = this, z = $$.config[__zoom_enabled] ? $$.zoom : function () {};
-        $$.main.select('.' + $$.CLASS.zoomRect).call(z);
-        $$.main.selectAll('.' + $$.CLASS.eventRect).call(z);
+        $$.main.select('.' + $$.CLASS[zoomRect]).call(z);
+        $$.main.selectAll('.' + $$.CLASS[eventRect]).call(z);
     };
 
 
@@ -4969,10 +4969,10 @@
         var $$ = this, config = $$.config;
         config[__data_onselected](d, target.node());
         // add selected-circle on low layer g
-        $$.main.select('.' + CLASS.selectedCircles + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS.selectedCircle + '-' + i)
+        $$.main.select('.' + CLASS[selectedCircles] + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS[selectedCircle] + '-' + i)
             .data([d])
           .enter().append('circle')
-            .attr("class", function () { return $$.generateClass(CLASS.selectedCircle, i); })
+            .attr("class", function () { return $$.generateClass(CLASS[selectedCircle], i); })
             .attr("cx", config[__axis_rotated] ? $$.circleY : $$.circleX)
             .attr("cy", config[__axis_rotated] ? $$.circleX : $$.circleY)
             .attr("stroke", function () { return $$.color(d); })
@@ -4984,7 +4984,7 @@
         var $$ = this;
         $$.config[__data_onunselected](d, target.node());
         // remove selected-circle from low layer g
-        $$.main.select('.' + CLASS.selectedCircles + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS.selectedCircle + '-' + i)
+        $$.main.select('.' + CLASS[selectedCircles] + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS[selectedCircle] + '-' + i)
           .transition().duration(100).attr('r', 0)
             .remove();
     };
@@ -5012,17 +5012,17 @@
     c3_chart_internal_fn.getToggle = function (that) {
         var $$ = this;
         // path selection not supported yet
-        return that.nodeName === 'circle' ? $$.togglePoint : ($$.d3.select(that).classed(CLASS.bar) ? $$.toggleBar : $$.toggleArc);
+        return that.nodeName === 'circle' ? $$.togglePoint : ($$.d3.select(that).classed(CLASS[bar]) ? $$.toggleBar : $$.toggleArc);
     };
     c3_chart_internal_fn.toggleShape = function (that, d, i) {
         var $$ = this, d3 = $$.d3, config = $$.config,
-            shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED), isWithin, toggle;
+            shape = d3.select(that), isSelected = shape.classed(CLASS[SELECTED]), isWithin, toggle;
         if (that.nodeName === 'circle') {
             isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
             toggle = $$.togglePoint;
         }
         else if (that.nodeName === 'path') {
-            if (shape.classed(CLASS.bar)) {
+            if (shape.classed(CLASS[bar])) {
                 isWithin = $$.isWithinBar(that);
                 toggle = $$.toggleBar;
             } else { // would be arc
@@ -5033,12 +5033,12 @@
         if (config[__data_selection_grouped] || isWithin) {
             if (config[__data_selection_enabled] && config[__data_selection_isselectable](d)) {
                 if (!config[__data_selection_multiple]) {
-                    $$.main.selectAll('.' + CLASS.shapes + (config[__data_selection_grouped] ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS.shape).each(function (d, i) {
+                    $$.main.selectAll('.' + CLASS[shapes] + (config[__data_selection_grouped] ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS[shape]).each(function (d, i) {
                         var shape = d3.select(this);
-                        if (shape.classed(CLASS.SELECTED)) { toggle(false, shape.classed(CLASS.SELECTED, false), d, i); }
+                        if (shape.classed(CLASS[SELECTED])) { toggle(false, shape.classed(CLASS[SELECTED], false), d, i); }
                     });
                 }
-                shape.classed(CLASS.SELECTED, !isSelected);
+                shape.classed(CLASS[SELECTED], !isSelected);
                 toggle(!isSelected, shape, d, i);
             }
             $$.config[__data_onclick](d, that);
@@ -5112,162 +5112,234 @@
     /**
      * c3.class.js
      */
-    var CLASS = c3_chart_internal_fn.CLASS = {
-        target: 'c3-target',
-        chart : 'c3-chart',
-        chartLine: 'c3-chart-line',
-        chartLines: 'c3-chart-lines',
-        chartBar: 'c3-chart-bar',
-        chartBars: 'c3-chart-bars',
-        chartText: 'c3-chart-text',
-        chartTexts: 'c3-chart-texts',
-        chartArc: 'c3-chart-arc',
-        chartArcs: 'c3-chart-arcs',
-        chartArcsTitle: 'c3-chart-arcs-title',
-        chartArcsBackground: 'c3-chart-arcs-background',
-        chartArcsGaugeUnit: 'c3-chart-arcs-gauge-unit',
-        chartArcsGaugeMax: 'c3-chart-arcs-gauge-max',
-        chartArcsGaugeMin: 'c3-chart-arcs-gauge-min',
-        selectedCircle: 'c3-selected-circle',
-        selectedCircles: 'c3-selected-circles',
-        eventRect: 'c3-event-rect',
-        eventRects: 'c3-event-rects',
-        eventRectsSingle: 'c3-event-rects-single',
-        eventRectsMultiple: 'c3-event-rects-multiple',
-        zoomRect: 'c3-zoom-rect',
-        brush: 'c3-brush',
-        focused: 'c3-focused',
-        region: 'c3-region',
-        regions: 'c3-regions',
-        tooltip: 'c3-tooltip',
-        tooltipName: 'c3-tooltip-name',
-        shape: 'c3-shape',
-        shapes: 'c3-shapes',
-        line: 'c3-line',
-        lines: 'c3-lines',
-        bar: 'c3-bar',
-        bars: 'c3-bars',
-        circle: 'c3-circle',
-        circles: 'c3-circles',
-        arc: 'c3-arc',
-        arcs: 'c3-arcs',
-        area: 'c3-area',
-        areas: 'c3-areas',
-        empty: 'c3-empty',
-        text: 'c3-text',
-        texts: 'c3-texts',
-        gaugeValue: 'c3-gauge-value',
-        grid: 'c3-grid',
-        xgrid: 'c3-xgrid',
-        xgrids: 'c3-xgrids',
-        xgridLine: 'c3-xgrid-line',
-        xgridLines: 'c3-xgrid-lines',
-        xgridFocus: 'c3-xgrid-focus',
-        ygrid: 'c3-ygrid',
-        ygrids: 'c3-ygrids',
-        ygridLine: 'c3-ygrid-line',
-        ygridLines: 'c3-ygrid-lines',
-        axis: 'c3-axis',
-        axisX: 'c3-axis-x',
-        axisXLabel: 'c3-axis-x-label',
-        axisY: 'c3-axis-y',
-        axisYLabel: 'c3-axis-y-label',
-        axisY2: 'c3-axis-y2',
-        axisY2Label: 'c3-axis-y2-label',
-        legendBackground: 'c3-legend-background',
-        legendItem: 'c3-legend-item',
-        legendItemEvent: 'c3-legend-item-event',
-        legendItemTile: 'c3-legend-item-tile',
-        legendItemHidden: 'c3-legend-item-hidden',
-        legendItemFocused: 'c3-legend-item-focused',
-        dragarea: 'c3-dragarea',
-        EXPANDED: '_expanded_',
-        SELECTED: '_selected_',
-        INCLUDED: '_included_'
-    };
+    var target = 'target',
+        chart  = 'chart ',
+        chartLine = 'chartLine',
+        chartLines = 'chartLines',
+        chartBar = 'chartBar',
+        chartBars = 'chartBars',
+        chartText = 'chartText',
+        chartTexts = 'chartTexts',
+        chartArc = 'chartArc',
+        chartArcs = 'chartArcs',
+        chartArcsTitle = 'chartArcsTitle',
+        chartArcsBackground = 'chartArcsBackground',
+        chartArcsGaugeUnit = 'chartArcsGaugeUnit',
+        chartArcsGaugeMax = 'chartArcsGaugeMax',
+        chartArcsGaugeMin = 'chartArcsGaugeMin',
+        selectedCircle = 'selectedCircle',
+        selectedCircles = 'selectedCircles',
+        eventRect = 'eventRect',
+        eventRects = 'eventRects',
+        eventRectsSingle = 'eventRectsSingle',
+        eventRectsMultiple = 'eventRectsMultiple',
+        zoomRect = 'zoomRect',
+        brush = 'brush',
+        focused = 'focused',
+        region = 'region',
+        regions = 'regions',
+        tooltip = 'tooltip',
+        tooltipName = 'tooltipName',
+        shape = 'shape',
+        shapes = 'shapes',
+        line = 'line',
+        lines = 'lines',
+        bar = 'bar',
+        bars = 'bars',
+        circle = 'circle',
+        circles = 'circles',
+        arc = 'arc',
+        arcs = 'arcs',
+        area = 'area',
+        areas = 'areas',
+        empty = 'empty',
+        text = 'text',
+        texts = 'texts',
+        gaugeValue = 'gaugeValue',
+        grid = 'grid',
+        xgrid = 'xgrid',
+        xgrids = 'xgrids',
+        xgridLine = 'xgridLine',
+        xgridLines = 'xgridLines',
+        xgridFocus = 'xgridFocus',
+        ygrid = 'ygrid',
+        ygrids = 'ygrids',
+        ygridLine = 'ygridLine',
+        ygridLines = 'ygridLines',
+        axis = 'axis',
+        axisX = 'axisX',
+        axisXLabel = 'axisXLabel',
+        axisY = 'axisY',
+        axisYLabel = 'axisYLabel',
+        axisY2 = 'axisY2',
+        axisY2Label = 'axisY2Label',
+        legendBackground = 'legendBackground',
+        legendItem = 'legendItem',
+        legendItemEvent = 'legendItemEvent',
+        legendItemTile = 'legendItemTile',
+        legendItemHidden = 'legendItemHidden',
+        legendItemFocused = 'legendItemFocused',
+        dragarea = 'dragarea',
+        EXPANDED = 'EXPANDED',
+        SELECTED = 'SELECTED',
+        INCLUDED = 'INCLUDED';
+
+    var CLASS = c3_chart_internal_fn.CLASS = {};
+    CLASS[target] = 'c3-target';
+    CLASS[chart] = 'c3-chart';
+    CLASS[chartLine] = 'c3-chart-line';
+    CLASS[chartLines] = 'c3-chart-lines';
+    CLASS[chartBar] = 'c3-chart-bar';
+    CLASS[chartBars] = 'c3-chart-bars';
+    CLASS[chartText] = 'c3-chart-text';
+    CLASS[chartTexts] = 'c3-chart-texts';
+    CLASS[chartArc] = 'c3-chart-arc';
+    CLASS[chartArcs] = 'c3-chart-arcs';
+    CLASS[chartArcsTitle] = 'c3-chart-arcs-title';
+    CLASS[chartArcsBackground] = 'c3-chart-arcs-background';
+    CLASS[chartArcsGaugeUnit] = 'c3-chart-arcs-gauge-unit';
+    CLASS[chartArcsGaugeMax] = 'c3-chart-arcs-gauge-max';
+    CLASS[chartArcsGaugeMin] = 'c3-chart-arcs-gauge-min';
+    CLASS[selectedCircle] = 'c3-selected-circle';
+    CLASS[selectedCircles] = 'c3-selected-circles';
+    CLASS[eventRect] = 'c3-event-rect';
+    CLASS[eventRects] = 'c3-event-rects';
+    CLASS[eventRectsSingle] = 'c3-event-rects-single';
+    CLASS[eventRectsMultiple] = 'c3-event-rects-multiple';
+    CLASS[zoomRect] = 'c3-zoom-rect';
+    CLASS[brush] = 'c3-brush';
+    CLASS[focused] = 'c3-focused';
+    CLASS[region] = 'c3-region';
+    CLASS[regions] = 'c3-regions';
+    CLASS[tooltip] = 'c3-tooltip';
+    CLASS[tooltipName] = 'c3-tooltip-name';
+    CLASS[shape] = 'c3-shape';
+    CLASS[shapes] = 'c3-shapes';
+    CLASS[line] = 'c3-line';
+    CLASS[lines] = 'c3-lines';
+    CLASS[bar] = 'c3-bar';
+    CLASS[bars] = 'c3-bars';
+    CLASS[circle] = 'c3-circle';
+    CLASS[circles] = 'c3-circles';
+    CLASS[arc] = 'c3-arc';
+    CLASS[arcs] = 'c3-arcs';
+    CLASS[area] = 'c3-area';
+    CLASS[areas] = 'c3-areas';
+    CLASS[empty] = 'c3-empty';
+    CLASS[text] = 'c3-text';
+    CLASS[texts] = 'c3-texts';
+    CLASS[gaugeValue] = 'c3-gauge-value';
+    CLASS[grid] = 'c3-grid';
+    CLASS[xgrid] = 'c3-xgrid';
+    CLASS[xgrids] = 'c3-xgrids';
+    CLASS[xgridLine] = 'c3-xgrid-line';
+    CLASS[xgridLines] = 'c3-xgrid-lines';
+    CLASS[xgridFocus] = 'c3-xgrid-focus';
+    CLASS[ygrid] = 'c3-ygrid';
+    CLASS[ygrids] = 'c3-ygrids';
+    CLASS[ygridLine] = 'c3-ygrid-line';
+    CLASS[ygridLines] = 'c3-ygrid-lines';
+    CLASS[axis] = 'c3-axis';
+    CLASS[axisX] = 'c3-axis-x';
+    CLASS[axisXLabel] = 'c3-axis-x-label';
+    CLASS[axisY] = 'c3-axis-y';
+    CLASS[axisYLabel] = 'c3-axis-y-label';
+    CLASS[axisY2] = 'c3-axis-y2';
+    CLASS[axisY2Label] = 'c3-axis-y2-label';
+    CLASS[legendBackground] = 'c3-legend-background';
+    CLASS[legendItem] = 'c3-legend-item';
+    CLASS[legendItemEvent] = 'c3-legend-item-event';
+    CLASS[legendItemTile] = 'c3-legend-item-tile';
+    CLASS[legendItemHidden] = 'c3-legend-item-hidden';
+    CLASS[legendItemFocused] = 'c3-legend-item-focused';
+    CLASS[dragarea] = 'c3-dragarea';
+    CLASS[EXPANDED] = '_expanded_';
+    CLASS[SELECTED] = '_selected_';
+    CLASS[INCLUDED] = '_included_';
+
     c3_chart_internal_fn.generateClass = function (prefix, targetId) {
         return " " + prefix + " " + prefix + this.getTargetSelectorSuffix(targetId);
     };
     c3_chart_internal_fn.classText = function (d) {
-        return this.generateClass(CLASS.text, d.index);
+        return this.generateClass(CLASS[text], d.index);
     };
     c3_chart_internal_fn.classTexts = function (d) {
-        return this.generateClass(CLASS.texts, d.id);
+        return this.generateClass(CLASS[texts], d.id);
     };
     c3_chart_internal_fn.classShape = function (d) {
-        return this.generateClass(CLASS.shape, d.index);
+        return this.generateClass(CLASS[shape], d.index);
     };
     c3_chart_internal_fn.classShapes = function (d) {
-        return this.generateClass(CLASS.shapes, d.id);
+        return this.generateClass(CLASS[shapes], d.id);
     };
     c3_chart_internal_fn.classLine = function (d) {
-        return this.classShape(d) + this.generateClass(CLASS.line, d.id);
+        return this.classShape(d) + this.generateClass(CLASS[line], d.id);
     };
     c3_chart_internal_fn.classLines = function (d) {
-        return this.classShapes(d) + this.generateClass(CLASS.lines, d.id);
+        return this.classShapes(d) + this.generateClass(CLASS[lines], d.id);
     };
     c3_chart_internal_fn.classCircle = function (d) {
-        return this.classShape(d) + this.generateClass(CLASS.circle, d.index);
+        return this.classShape(d) + this.generateClass(CLASS[circle], d.index);
     };
     c3_chart_internal_fn.classCircles = function (d) {
-        return this.classShapes(d) + this.generateClass(CLASS.circles, d.id);
+        return this.classShapes(d) + this.generateClass(CLASS[circles], d.id);
     };
     c3_chart_internal_fn.classBar = function (d) {
-        return this.classShape(d) + this.generateClass(CLASS.bar, d.index);
+        return this.classShape(d) + this.generateClass(CLASS[bar], d.index);
     };
     c3_chart_internal_fn.classBars = function (d) {
-        return this.classShapes(d) + this.generateClass(CLASS.bars, d.id);
+        return this.classShapes(d) + this.generateClass(CLASS[bars], d.id);
     };
     c3_chart_internal_fn.classArc = function (d) {
-        return this.classShape(d.data) + this.generateClass(CLASS.arc, d.data.id);
+        return this.classShape(d.data) + this.generateClass(CLASS[arc], d.data.id);
     };
     c3_chart_internal_fn.classArcs = function (d) {
-        return this.classShapes(d.data) + this.generateClass(CLASS.arcs, d.data.id);
+        return this.classShapes(d.data) + this.generateClass(CLASS[arcs], d.data.id);
     };
     c3_chart_internal_fn.classArea = function (d) {
-        return this.classShape(d) + this.generateClass(CLASS.area, d.id);
+        return this.classShape(d) + this.generateClass(CLASS[area], d.id);
     };
     c3_chart_internal_fn.classAreas = function (d) {
-        return this.classShapes(d) + this.generateClass(CLASS.areas, d.id);
+        return this.classShapes(d) + this.generateClass(CLASS[areas], d.id);
     };
     c3_chart_internal_fn.classRegion = function (d, i) {
-        return this.generateClass(CLASS.region, i) + ' ' + ('class' in d ? d.class : '');
+        return this.generateClass(CLASS[region], i) + ' ' + ('class' in d ? d.class : '');
     };
     c3_chart_internal_fn.classEvent = function (d) {
-        return this.generateClass(CLASS.eventRect, d.index);
+        return this.generateClass(CLASS[eventRect], d.index);
     };
     c3_chart_internal_fn.classTarget = function (id) {
         var $$ = this;
         var additionalClassSuffix = $$.config[__data_classes][id], additionalClass = '';
         if (additionalClassSuffix) {
-            additionalClass = ' ' + CLASS.target + '-' + additionalClassSuffix;
+            additionalClass = ' ' + CLASS[target] + '-' + additionalClassSuffix;
         }
-        return $$.generateClass(CLASS.target, id) + additionalClass;
+        return $$.generateClass(CLASS[target], id) + additionalClass;
     };
     c3_chart_internal_fn.classChartText = function (d) {
-        return CLASS.chartText + this.classTarget(d.id);
+        return CLASS[chartText] + this.classTarget(d.id);
     };
     c3_chart_internal_fn.classChartLine = function (d) {
-        return CLASS.chartLine + this.classTarget(d.id);
+        return CLASS[chartLine] + this.classTarget(d.id);
     };
     c3_chart_internal_fn.classChartBar = function (d) {
-        return CLASS.chartBar + this.classTarget(d.id);
+        return CLASS[chartBar] + this.classTarget(d.id);
     };
     c3_chart_internal_fn.classChartArc = function (d) {
-        return CLASS.chartArc + this.classTarget(d.data.id);
+        return CLASS[chartArc] + this.classTarget(d.data.id);
     };
     c3_chart_internal_fn.getTargetSelectorSuffix = function (targetId) {
         return targetId || targetId === 0 ? '-' + (targetId.replace ? targetId.replace(/([^a-zA-Z0-9-_])/g, '-') : targetId) : '';
     };
     c3_chart_internal_fn.selectorTarget = function (id) {
-        return '.' + CLASS.target + this.getTargetSelectorSuffix(id);
+        return '.' + CLASS[target] + this.getTargetSelectorSuffix(id);
     };
     c3_chart_internal_fn.selectorTargets = function (ids) {
         var $$ = this;
         return ids.length ? ids.map(function (id) { return $$.selectorTarget(id); }) : null;
     };
     c3_chart_internal_fn.selectorLegend = function (id) {
-        return '.' + CLASS.legendItem + this.getTargetSelectorSuffix(id);
+        return '.' + CLASS[legendItem] + this.getTargetSelectorSuffix(id);
     };
     c3_chart_internal_fn.selectorLegends = function (ids) {
         var $$ = this;
@@ -5341,26 +5413,26 @@
         minY = (config[__data_selection_grouped]) ? $$.margin.top : Math.min(sy, my);
         maxY = (config[__data_selection_grouped]) ? $$.height : Math.max(sy, my);
 
-        main.select('.' + CLASS.dragarea)
+        main.select('.' + CLASS[dragarea])
             .attr('x', minX)
             .attr('y', minY)
             .attr('width', maxX - minX)
             .attr('height', maxY - minY);
         // TODO: binary search when multiple xs
-        main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape)
+        main.selectAll('.' + CLASS[shapes]).selectAll('.' + CLASS[shape])
             .filter(function (d) { return config[__data_selection_isselectable](d); })
             .each(function (d, i) {
                 var shape = d3.select(this),
-                    isSelected = shape.classed(CLASS.SELECTED),
-                    isIncluded = shape.classed(CLASS.INCLUDED),
+                    isSelected = shape.classed(CLASS[SELECTED]),
+                    isIncluded = shape.classed(CLASS[INCLUDED]),
                     _x, _y, _w, _h, toggle, isWithin = false, box;
-                if (shape.classed(CLASS.circle)) {
+                if (shape.classed(CLASS[circle])) {
                     _x = shape.attr("cx") * 1;
                     _y = shape.attr("cy") * 1;
                     toggle = $$.togglePoint;
                     isWithin = minX < _x && _x < maxX && minY < _y && _y < maxY;
                 }
-                else if (shape.classed(CLASS.bar)) {
+                else if (shape.classed(CLASS[bar])) {
                     box = getPathBox(this);
                     _x = box.x;
                     _y = box.y;
@@ -5373,9 +5445,9 @@
                     return;
                 }
                 if (isWithin ^ isIncluded) {
-                    shape.classed(CLASS.INCLUDED, !isIncluded);
+                    shape.classed(CLASS[INCLUDED], !isIncluded);
                     // TODO: included/unincluded callback here
-                    shape.classed(CLASS.SELECTED, !isSelected);
+                    shape.classed(CLASS[SELECTED], !isSelected);
                     $$.toggle(!isSelected, shape, d, i);
                 }
             });
@@ -5386,8 +5458,8 @@
         if ($$.hasArcType($$.data.targets)) { return; }
         if (! config[__data_selection_enabled]) { return; } // do nothing if not selectable
         $$.dragStart = mouse;
-        $$.main.select('.' + CLASS.chart).append('rect')
-            .attr('class', CLASS.dragarea)
+        $$.main.select('.' + CLASS[chart]).append('rect')
+            .attr('class', CLASS[dragarea])
             .style('opacity', 0.1);
         $$.dragging = true;
         $$.config[__data_ondragstart]();
@@ -5397,12 +5469,12 @@
         var $$ = this, config = $$.config;
         if ($$.hasArcType($$.data.targets)) { return; }
         if (! config[__data_selection_enabled]) { return; } // do nothing if not selectable
-        $$.main.select('.' + CLASS.dragarea)
+        $$.main.select('.' + CLASS[dragarea])
             .transition().duration(100)
             .style('opacity', 0)
             .remove();
-        $$.main.selectAll('.' + CLASS.shape)
-            .classed(CLASS.INCLUDED, false);
+        $$.main.selectAll('.' + CLASS[shape])
+            .classed(CLASS[INCLUDED], false);
         $$.dragging = false;
         $$.config[__data_ondragend]();
     };
@@ -5424,7 +5496,7 @@
         }
         this.revert();
         this.defocus();
-        focus(candidatesForNoneArc.classed(CLASS.focused, true));
+        focus(candidatesForNoneArc.classed(CLASS[focused], true));
         focus(candidatesForArc);
         if ($$.hasArcType($$.data.targets)) {
             $$.expandArc(targetId, true);
@@ -5441,7 +5513,7 @@
             $$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 0.3);
         }
         this.revert();
-        defocus(candidatesForNoneArc.classed(CLASS.focused, false));
+        defocus(candidatesForNoneArc.classed(CLASS[focused], false));
         defocus(candidatesForArc);
         if ($$.hasArcType($$.data.targets)) {
             $$.unexpandArc(targetId);
@@ -5457,7 +5529,7 @@
         function revert(targets) {
             $$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1);
         }
-        revert(candidatesForNoneArc.classed(CLASS.focused, false));
+        revert(candidatesForNoneArc.classed(CLASS[focused], false));
         revert(candidatesForArc);
         if ($$.hasArcType($$.data.targets)) {
             $$.unexpandArc(targetId);
@@ -5704,30 +5776,30 @@
     c3_chart_fn.selected = function (targetId) {
         var $$ = this.internal, d3 = $$.d3;
         return d3.merge(
-            $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(targetId)).selectAll('.' + CLASS.shape)
-                .filter(function () { return d3.select(this).classed(CLASS.SELECTED); })
+            $$.main.selectAll('.' + CLASS[shapes] + $$.getTargetSelectorSuffix(targetId)).selectAll('.' + CLASS[shape])
+                .filter(function () { return d3.select(this).classed(CLASS[SELECTED]); })
                 .map(function (d) { return d.map(function (d) { var data = d.__data__; return data.data ? data.data : data; }); })
         );
     };
     c3_chart_fn.select = function (ids, indices, resetOther) {
         var $$ = this.internal, d3 = $$.d3, config = $$.config;
         if (! config[__data_selection_enabled]) { return; }
-        $$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
+        $$.main.selectAll('.' + CLASS[shapes]).selectAll('.' + CLASS[shape]).each(function (d, i) {
             var shape = d3.select(this), id = d.data ? d.data.id : d.id, toggle = $$.getToggle(this),
                 isTargetId = config[__data_selection_grouped] || !ids || ids.indexOf(id) >= 0,
                 isTargetIndex = !indices || indices.indexOf(i) >= 0,
-                isSelected = shape.classed(CLASS.SELECTED);
+                isSelected = shape.classed(CLASS[SELECTED]);
             // line/area selection not supported yet
-            if (shape.classed(CLASS.line) || shape.classed(CLASS.area)) {
+            if (shape.classed(CLASS[line]) || shape.classed(CLASS[area])) {
                 return;
             }
             if (isTargetId && isTargetIndex) {
                 if (config[__data_selection_isselectable](d) && !isSelected) {
-                    toggle(true, shape.classed(CLASS.SELECTED, true), d, i);
+                    toggle(true, shape.classed(CLASS[SELECTED], true), d, i);
                 }
             } else if (isDefined(resetOther) && resetOther) {
                 if (isSelected) {
-                    toggle(false, shape.classed(CLASS.SELECTED, false), d, i);
+                    toggle(false, shape.classed(CLASS[SELECTED], false), d, i);
                 }
             }
         });
@@ -5735,19 +5807,19 @@
     c3_chart_fn.unselect = function (ids, indices) {
         var $$ = this.internal, d3 = $$.d3, config = $$.config;
         if (! config[__data_selection_enabled]) { return; }
-        $$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
+        $$.main.selectAll('.' + CLASS[shapes]).selectAll('.' + CLASS[shape]).each(function (d, i) {
             var shape = d3.select(this), id = d.data ? d.data.id : d.id, toggle = $$.getToggle(this),
                 isTargetId = config[__data_selection_grouped] || !ids || ids.indexOf(id) >= 0,
                 isTargetIndex = !indices || indices.indexOf(i) >= 0,
-                isSelected = shape.classed(CLASS.SELECTED);
+                isSelected = shape.classed(CLASS[SELECTED]);
             // line/area selection not supported yet
-            if (shape.classed(CLASS.line) || shape.classed(CLASS.area)) {
+            if (shape.classed(CLASS[line]) || shape.classed(CLASS[area])) {
                 return;
             }
             if (isTargetId && isTargetIndex) {
                 if (config[__data_selection_isselectable](d)) {
                     if (isSelected) {
-                        toggle(false, shape.classed(CLASS.SELECTED, false), d, i);
+                        toggle(false, shape.classed(CLASS[SELECTED], false), d, i);
                     }
                 }
             }
@@ -5820,9 +5892,9 @@
 
         options = options || {};
         duration = $$.getOption(options, "duration", config[__transition_duration]);
-        classes = $$.getOption(options, "classes", [CLASS.region]);
+        classes = $$.getOption(options, "classes", [CLASS[region]]);
 
-        regions = $$.main.select('.' + CLASS.regions).selectAll(classes.map(function (c) { return '.' + c; }));
+        regions = $$.main.select('.' + CLASS[regions]).selectAll(classes.map(function (c) { return '.' + c; }));
         (duration ? regions.transition().duration(duration) : regions)
             .style('opacity', 0)
             .remove();