Fix bugs

Gruntfile.coffee

@@ -39,6 +39,7 @@ module.exports = (grunt) ->
               'src/arc.js',
               'src/region.js',
               'src/drag.js',
+              'src/selection.js',
               'src/subchart.js',
               'src/zoom.js',
               'src/color.js',

htdocs/samples/axes_range.html

@@ -55,7 +55,7 @@
       }, 2000);
 
       setTimeout(function () {
-      chart1.axis.range({max: {x: 5}, min: {x: 0}});
+        chart1.axis.range({max: {x: 5}, min: {x: 0}});
       }, 3000);
 
       setTimeout(function () {
@@ -79,7 +79,7 @@
       }, 5000);
 
       setTimeout(function () {
-      chart2.axis.range({max: {y: 400}, min: {y: 0}});
+        chart2.axis.range({max: {y: 400}, min: {y: 0}});
       }, 6000);
 
     </script>

htdocs/samples/categorized.html

@@ -9,6 +9,7 @@
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
+
       var chart1 = c3.generate({
         bindto: '#chart1',
         data: {

htdocs/samples/data_region.html

@@ -6,7 +6,7 @@
     <div id="chart"></div>
 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         bindto: '#chart',

htdocs/samples/data_region_timeseries.html

@@ -6,13 +6,13 @@
     <div id="chart"></div>
 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         bindto: '#chart',
         data: {
           x : 'date',
-          x_format : '%Y%m%d',
+          xFormat : '%Y%m%d',
           columns: [
 //            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
             ['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],

htdocs/samples/grid_x_lines.html

@@ -7,7 +7,7 @@
     <div id="chart2"></div>
 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="/js/c3.js"></script>
     <script>
 
       var chart = c3.generate({

htdocs/samples/timeseries.html

@@ -12,7 +12,7 @@
         bindto: '#chart',
         data: {
           x : 'date',
-          x_format : '%Y%m%d',
+          xFormat : '%Y%m%d',
           columns: [
 //            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
             ['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],

htdocs/samples/timeseries_date.html

@@ -12,7 +12,7 @@
         bindto: '#chart',
         data: {
           x : 'x',
-          x_format : '%Y%m%d',
+          xFormat : '%Y%m%d',
           columns: [
             ['x', new Date('2013-01-01 00:00:00'), new Date('2013-01-02 00:00:00'), new Date('2013-01-03 00:00:00'), new Date('2013-01-04 00:00:00'), new Date('2013-01-05 00:00:00'), new Date('2013-01-06 00:00:00')],
             ['sample', 30, 200, 100, 400, 150, 250],

src/api.js

@@ -377,7 +377,7 @@ c3_chart_fn.ygrids = function (grids) {
 };
 c3_chart_fn.ygrids.add = function (grids) {
     var $$ = this.internal;
-    return c3.ygrids($$.config[__grid_y_lines].concat(grids ? grids : []));
+    return this.ygrids($$.config[__grid_y_lines].concat(grids ? grids : []));
 };
 c3_chart_fn.ygrids.remove = function (params) { // TODO: multiple
     var $$ = this.internal;
@@ -425,8 +425,7 @@ c3_chart_fn.regions.remove = function (options) {
     return config[__regions];
 };
 
-c3_chart_fn.data = function () {
-};
+c3_chart_fn.data = function () {};
 c3_chart_fn.data.get = function (targetId) {
     var target = this.data.getAsTarget(targetId);
     return isDefined(target) ? target.values.map(function (d) { return d.value; }) : undefined;
@@ -493,8 +492,7 @@ c3_chart_fn.xs = function (xs) {
 };
 
 
-c3_chart_fn.axis = function () {
-};
+c3_chart_fn.axis = function () {};
 c3_chart_fn.axis.labels = function (labels) {
     var $$ = this.internal;
     if (arguments.length) {
@@ -539,8 +537,7 @@ c3_chart_fn.axis.range = function (range) {
 };
 
 
-c3_chart_fn.legend = function () {
-};
+c3_chart_fn.legend = function () {};
 c3_chart_fn.legend.show = function (targetIds) {
     var $$ = this.internal;
     $$.showLegend($$.mapToTargetIds(targetIds));

src/core.js

@@ -3,15 +3,26 @@ var c3 = { version: "0.3.0" };
 var c3_chart_fn, c3_chart_internal_fn;
 
 function Chart(config) {
-    var $$ = this.internal = new ChartInternal(config, this);
+    var $$ = this.internal = new ChartInternal(this);
     $$.loadConfig(config);
     $$.init();
+
+    // bind "this" to nested API
+    (function bindThis(fn, target, argThis) {
+        for (var key in fn) {
+            target[key] = fn[key].bind(argThis);
+            if (Object.keys(fn[key]).length > 0) {
+                bindThis(fn[key], target[key], argThis);
+            }
+        }
+    })(c3_chart_fn, this, this);
 }
 
-function ChartInternal(config, api) {
+function ChartInternal(api) {
     var $$ = this;
     $$.d3 = window.d3 ? window.d3 : typeof require !== 'undefined' ? require("d3") : undefined;
     $$.api = api;
+    $$.config = $$.getDefaultConfig();
     $$.data = {};
     $$.cache = {};
     $$.axes = {};
@@ -54,7 +65,7 @@ c3_chart_internal_fn.init = function () {
 };
 
 c3_chart_internal_fn.initParams = function () {
-    var $$ = this, d3 = $$.d3;
+    var $$ = this, d3 = $$.d3, config = $$.config;
 
     // MEMO: clipId needs to be unique because it conflicts when multiple charts exist
     $$.clipId = "c3-" + (+new Date()) + '-clip',
@@ -73,7 +84,7 @@ c3_chart_internal_fn.initParams = function () {
     $$.color = $$.generateColor();
     $$.levelColor = $$.generateLevelColor();
 
-    $$.dataTimeFormat = config[__data_x_localtime] ? d3.time.format : d3.time.format.utc;
+    $$.dataTimeFormat = config[__data_xLocaltime] ? d3.time.format : d3.time.format.utc;
     $$.axisTimeFormat = config[__axis_x_localtime] ? d3.time.format : d3.time.format.utc;
     $$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([
         [".%L", function (d) { return d.getMilliseconds(); }],
@@ -500,6 +511,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
     var drawArea, drawBar, drawLine, xForText, yForText;
     var duration, durationForExit, durationForAxis, waitForDraw;
     var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling;
+    var xv, cx, cy;
 
     xgrid = xgridLines = mainCircle = mainText = d3.selectAll([]);
 
@@ -865,13 +877,13 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         }
     }
 
-    var xv_ = generateCall($$.xv, $$);
+    xv = generateCall($$.xv, $$);
+    cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$);
+    cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
 
     // transition should be derived from one transition
     d3.transition().duration(duration).each(function () {
-        var transitions = [],
-            cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$),
-            cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
+        var transitions = [];
 
         transitions.push(mainBar.transition()
                          .attr('d', drawBar)
@@ -899,20 +911,20 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
                          .style("fill", $$.color)
                          .style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$)));
         transitions.push(mainRegion.selectAll('rect').transition()
-                         .attr("x", $$.regionX)
-                         .attr("y", $$.regionY)
-                         .attr("width", $$.regionWidth)
-                         .attr("height", $$.regionHeight)
+                         .attr("x", generateCall($$.regionX, $$))
+                         .attr("y", generateCall($$.regionY, $$))
+                         .attr("width", generateCall($$.regionWidth, $$))
+                         .attr("height", generateCall($$.regionHeight, $$))
                          .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }));
         transitions.push(xgridLines.select('line').transition()
-                         .attr("x1", config[__axis_rotated] ? 0 : xv_)
-                         .attr("x2", config[__axis_rotated] ? $$.width : xv_)
-                         .attr("y1", config[__axis_rotated] ? xv_ : $$.margin.top)
-                         .attr("y2", config[__axis_rotated] ? xv_ : $$.height)
+                         .attr("x1", config[__axis_rotated] ? 0 : xv)
+                         .attr("x2", config[__axis_rotated] ? $$.width : xv)
+                         .attr("y1", config[__axis_rotated] ? xv : $$.margin.top)
+                         .attr("y2", config[__axis_rotated] ? xv : $$.height)
                          .style("opacity", 1));
         transitions.push(xgridLines.select('text').transition()
                          .attr("x", config[__axis_rotated] ? $$.width : 0)
-                         .attr("y", xv_)
+                         .attr("y", xv)
                          .text(function (d) { return d.text; })
                          .style("opacity", 1));
         // Wait for end of transitions if called from flow API
@@ -1003,11 +1015,11 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
             xgridLines
                 .attr('transform', null);
             xgridLines.select('line')
-                .attr("x1", config[__axis_rotated] ? 0 : xv_)
-                .attr("x2", config[__axis_rotated] ? $$.width : xv_);
+                .attr("x1", config[__axis_rotated] ? 0 : xv)
+                .attr("x2", config[__axis_rotated] ? $$.width : xv);
             xgridLines.select('text')
                 .attr("x", config[__axis_rotated] ? $$.width : 0)
-                .attr("y", xv_);
+                .attr("y", xv);
             mainBar
                 .attr('transform', null)
                 .attr("d", drawBar);
@@ -1019,8 +1031,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
                 .attr("d", drawArea);
             mainCircle
                 .attr('transform', null)
-                .attr("cx", config[__axis_rotated] ? $$.circleY : $$.circleX)
-                .attr("cy", config[__axis_rotated] ? $$.circleX : $$.circleY);
+                .attr("cx", cx)
+                .attr("cy", cy);
             mainText
                 .attr('transform', null)
                 .attr('x', xForText)
@@ -1029,8 +1041,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
             mainRegion
                 .attr('transform', null);
             mainRegion.select('rect').filter($$.isRegionOnX)
-                .attr("x", $$.regionX)
-                .attr("width", $$.regionWidth);
+                .attr("x", generateCall($$.regionX, $$))
+                .attr("width", generateCall($$.regionWidth, $$));
             eventRectUpdate
                 .attr("x", config[__axis_rotated] ? 0 : rectX)
                 .attr("y", config[__axis_rotated] ? rectX : 0)
@@ -1386,7 +1398,7 @@ c3_chart_internal_fn.transformMain = function (withTransition, transitions) {
 c3_chart_internal_fn.transformAll = function (withTransition, transitions) {
     var $$ = this;
     $$.transformMain(withTransition, transitions);
-    if (config[__subchart_show]) { $$.transformContext(withTransition, transitions); }
+    if ($$.config[__subchart_show]) { $$.transformContext(withTransition, transitions); }
     if ($$.legend) { $$.transformLegend(withTransition); }
 };
 
@@ -1533,7 +1545,7 @@ c3_chart_internal_fn.parseDate = function (date) {
     } else if (typeof date === 'number') {
         parsedDate = new Date(date);
     } else {
-        parsedDate = $$.dataTimeFormat(config[__data_x_format]).parse(date);
+        parsedDate = $$.dataTimeFormat($$.config[__data_xFormat]).parse(date);
     }
     if (!parsedDate || isNaN(+parsedDate)) {
         window.console.error("Failed to parse x '" + date + "' to Date object");

src/data.convert.js

@@ -7,7 +7,7 @@ c3_chart_internal_fn.convertUrlToData = function (url, mimeType, keys, done) {
         } else {
             d = $$.convertCsvToData(data.response);
         }
-        done(d);
+        done.call($$, d);
     });
 };
 c3_chart_internal_fn.convertCsvToData = function (csv) {
@@ -113,6 +113,7 @@ c3_chart_internal_fn.convertDataToTargets = function (data, appendXs) {
         }
     });
 
+
     // check x is defined
     ids.forEach(function (id) {
         if (!$$.data.xs[id]) {
@@ -122,7 +123,7 @@ c3_chart_internal_fn.convertDataToTargets = function (data, appendXs) {
 
     // convert to target
     targets = ids.map(function (id, index) {
-        var convertedId = config[__data_id_converter](id);
+        var convertedId = config[__data_idConverter](id);
         return {
             id: convertedId,
             id_org: id,

src/drag.js

@@ -51,7 +51,7 @@ c3_chart_internal_fn.drag = function (mouse) {
                 shape.classed(CLASS[_INCLUDED], !isIncluded);
                 // TODO: included/unincluded callback here
                 shape.classed(CLASS[_SELECTED], !isSelected);
-                $$.toggle(!isSelected, shape, d, i);
+                toggle.call($$, !isSelected, shape, d, i);
             }
         });
 };

src/format.js

@@ -24,7 +24,7 @@ c3_chart_internal_fn.defaultArcValueFormat = function (v, ratio) {
     return (ratio * 100).toFixed(1) + '%';
 };
 c3_chart_internal_fn.formatByAxisId = function (axisId) {
-    var $$ = this.internal, data_labels = $$.config[__data_labels],
+    var $$ = this, data_labels = $$.config[__data_labels],
         format = function (v) { return isValue(v) ? +v : ""; };
     // find format according to axis id
     if (isFunction(data_labels.format)) {

src/grid.js

 c3_chart_internal_fn.showXGridFocus = function (selectedData) {
-    var $$ = this, dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); });
+    var $$ = this, config = $$.config,
+        dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); });
     if (! config[__tooltip_show]) { return; }
     // Hide when scatter plot exists
     if ($$.hasType('scatter') || $$.hasArcType()) { return; }

src/legend.js

 c3_chart_internal_fn.initLegend = function () {
     var $$ = this;
     $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend'));
-    if (!config[__legend_show]) {
+    if (!$$.config[__legend_show]) {
         $$.legend.style('visibility', 'hidden');
         $$.hiddenLegendIds = $$.mapToIds($$.data.targets);
     }
@@ -10,7 +10,7 @@ c3_chart_internal_fn.initLegend = function () {
     $$.updateLegend($$.mapToIds($$.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false});
 };
 c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth) {
-    var $$ = this, insetLegendPosition = {
+    var $$ = this, config = $$.config, insetLegendPosition = {
         top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config[__legend_inset_y] + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config[__legend_inset_y],
         left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config[__legend_inset_x] + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config[__legend_inset_x] + 0.5
     };
@@ -197,7 +197,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
         .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);
+            isFunction(config[__legend_item_onclick]) ? config[__legend_item_onclick].call($$, id) : $$.api.toggle(id);
         })
         .on('mouseover', function (id) {
             $$.d3.select(this).classed(CLASS[_legendItemFocused], true);

src/selection.js

-    c3_chart_internal_fn.selectPoint = function (target, d, i) {
-        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)
-            .data([d])
-          .enter().append('circle')
-            .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); })
-            .attr("r", $$.pointSelectR(d) * 1.4)
-          .transition().duration(100)
-            .attr("r", $$.pointSelectR);
-    };
-    c3_chart_internal_fn.unselectPoint = function (target, d, i) {
-        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)
-          .transition().duration(100).attr('r', 0)
-            .remove();
-    };
-    c3_chart_internal_fn.togglePoint = function (selected, target, d, i) {
-        selected ? this.selectPoint(target, d, i) : this.unselectPoint(target, d, i);
-    };
-    c3_chart_internal_fn.selectBar = function (target, d) {
-        var $$ = this;
-        $$.config[__data_onselected].call($$, d, target.node());
-        target.transition().duration(100)
-            .style("fill", function () { return $$.d3.rgb($$.color(d)).brighter(0.75); });
-    };
-    c3_chart_internal_fn.unselectBar = function (target, d) {
-        var $$ = this;
-        $$.config[__data_onunselected].call($$, d, target.node());
-        target.transition().duration(100)
-            .style("fill", function () { return $$.color(d); });
-    };
-    c3_chart_internal_fn.toggleBar = function (selected, target, d, i) {
-        selected ? this.selectBar(target, d, i) : this.unselectBar(target, d, i);
-    };
-    c3_chart_internal_fn.toggleArc = function (selected, target, d, i) {
-        this.toggleBar(selected, target, d.data, i);
-    };
-    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);
-    };
-    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;
-        if (that.nodeName === 'circle') {
-            isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
-            toggle = $$.togglePoint;
+c3_chart_internal_fn.selectPoint = function (target, d, i) {
+    var $$ = this, config = $$.config,
+        cx = generateCall(config[__axis_rotated] ? $$.circleY : $$.circleX, $$),
+        cy = generateCall(config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
+    
+    config[__data_onselected].call($$.api, d, target.node());
+    // add selected-circle on low layer g
+    $$.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("cx", cx)
+        .attr("cy", cy)
+        .attr("stroke", function () { return $$.color(d); })
+        .attr("r", function (d) { return $$.pointSelectR(d) * 1.4; })
+        .transition().duration(100)
+        .attr("r", generateCall($$.pointSelectR, $$));
+};
+c3_chart_internal_fn.unselectPoint = function (target, d, i) {
+    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)
+        .transition().duration(100).attr('r', 0)
+        .remove();
+};
+c3_chart_internal_fn.togglePoint = function (selected, target, d, i) {
+    selected ? this.selectPoint(target, d, i) : this.unselectPoint(target, d, i);
+};
+c3_chart_internal_fn.selectBar = function (target, d) {
+    var $$ = this;
+    $$.config[__data_onselected].call($$, d, target.node());
+    target.transition().duration(100)
+        .style("fill", function () { return $$.d3.rgb($$.color(d)).brighter(0.75); });
+};
+c3_chart_internal_fn.unselectBar = function (target, d) {
+    var $$ = this;
+    $$.config[__data_onunselected].call($$, d, target.node());
+    target.transition().duration(100)
+        .style("fill", function () { return $$.color(d); });
+};
+c3_chart_internal_fn.toggleBar = function (selected, target, d, i) {
+    selected ? this.selectBar(target, d, i) : this.unselectBar(target, d, i);
+};
+c3_chart_internal_fn.toggleArc = function (selected, target, d, i) {
+    this.toggleBar(selected, target, d.data, i);
+};
+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);
+};
+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;
+    if (that.nodeName === 'circle') {
+        isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+        toggle = $$.togglePoint;
+    }
+    else if (that.nodeName === 'path') {
+        if (shape.classed(CLASS[_bar])) {
+            isWithin = $$.isWithinBar(that);
+            toggle = $$.toggleBar;
+        } else { // would be arc
+            isWithin = true;
+            toggle = $$.toggleArc;
         }
-        else if (that.nodeName === 'path') {
-            if (shape.classed(CLASS[_bar])) {
-                isWithin = $$.isWithinBar(that);
-                toggle = $$.toggleBar;
-            } else { // would be arc
-                isWithin = true;
-                toggle = $$.toggleArc;
+    }
+    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) {
+                    var shape = d3.select(this);
+                    if (shape.classed(CLASS[_SELECTED])) { toggle.call($$, false, shape.classed(CLASS[_SELECTED], false), d, i); }
+                });
             }
+            shape.classed(CLASS[_SELECTED], !isSelected);
+            toggle.call($$, !isSelected, shape, d, i);
         }
-        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) {
-                        var shape = d3.select(this);
-                        if (shape.classed(CLASS[_SELECTED])) { toggle(false, shape.classed(CLASS[_SELECTED], false), d, i); }
-                    });
-                }
-                shape.classed(CLASS[_SELECTED], !isSelected);
-                toggle(!isSelected, shape, d, i);
-            }
-            $$.config[__data_onclick](d, that);
-        }
-    };
-
+        $$.config[__data_onclick].call($$.api, d, that);
+    }
+};

src/shape.js

@@ -222,13 +222,13 @@ c3_chart_internal_fn.generateXYForText = function (barIndices, forX) {
         getPoints = $$.generateGetBarPoints(barIndices, false),
         getter = forX ? $$.getXForText : $$.getYForText;
     return function (d, i) {
-        return getter(getPoints(d, i), d, this);
+        return getter.call($$, getPoints(d, i), d, this);
     };
 };
 c3_chart_internal_fn.getXForText = function (points, d, textElement) {
     var $$ = this,
         box = textElement.getBoundingClientRect(), xPos, padding;
-    if (config[__axis_rotated]) {
+    if ($$.config[__axis_rotated]) {
         padding = $$.isBarType(d) ? 4 : 6;
         xPos = points[2][1] + padding * (d.value < 0 ? -1 : 1);
     } else {
@@ -239,7 +239,7 @@ c3_chart_internal_fn.getXForText = function (points, d, textElement) {
 c3_chart_internal_fn.getYForText = function (points, d, textElement) {
     var $$ = this,
         box = textElement.getBoundingClientRect(), yPos;
-    if (config[__axis_rotated]) {
+    if ($$.config[__axis_rotated]) {
         yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2;
     } else {
         yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6);

src/subchart.js

@@ -158,7 +158,7 @@ c3_chart_internal_fn.redrawForBrush = function () {
         withSubchart: false,
         withUpdateXDomain: true
     });
-    $$.config[__subchart_onbrush].call($$, x.orgDomain());
+    $$.config[__subchart_onbrush].call($$.api, x.orgDomain());
 };
 c3_chart_internal_fn.transformContext = function (withTransition, transitions) {
     var $$ = this, subXAxis;

src/zoom.js

@@ -4,7 +4,7 @@ c3_chart_internal_fn.initZoom = function () {
         .on("zoomstart", function () {
             $$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;
         })
-        .on("zoom", $$.redrawForZoom);
+        .on("zoom", function () { $$.redrawForZoom.call($$); });
     $$.zoom.scale = function (scale) {
         return config[__axis_rotated] ? this.y(scale) : this.x(scale);
     };
@@ -14,8 +14,8 @@ c3_chart_internal_fn.initZoom = function () {
     };
     $$.zoom.updateScaleExtent = function () {
         var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.orgXDomain),
-            extent = $$.orgScaleExtent();
-        $$.scaleExtent([extent[0] * ratio, extent[1] * ratio]);
+            extent = this.orgScaleExtent();
+        this.scaleExtent([extent[0] * ratio, extent[1] * ratio]);
         return this;
     };
 };
@@ -48,5 +48,5 @@ c3_chart_internal_fn.redrawForZoom = function () {
     if (d3.event.sourceEvent.type === 'mousemove') {
         $$.cancelClick = true;
     }
-    config[__zoom_onzoom].call(c3, x.orgDomain());
+    config[__zoom_onzoom].call($$.api, x.orgDomain());
 };