Use bind instead of my function

src/api.js

@@ -1,8 +1,8 @@
 c3_chart_fn.focus = function (targetId) {
     var $$ = this.internal,
         candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
-        candidatesForNoneArc = candidates.filter(generateCall($$.isNoneArc, $$)),
-        candidatesForArc = candidates.filter(generateCall($$.isArc, $$));
+        candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)),
+        candidatesForArc = candidates.filter($$.isArc.bind($$));
     function focus(targets) {
         $$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1);
     }
@@ -19,8 +19,8 @@ c3_chart_fn.focus = function (targetId) {
 c3_chart_fn.defocus = function (targetId) {
     var $$ = this.internal,
         candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
-        candidatesForNoneArc = candidates.filter(generateCall($$.isNoneArc, $$)),
-        candidatesForArc = candidates.filter(generateCall($$.isArc, $$));
+        candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)),
+        candidatesForArc = candidates.filter($$.isArc.bind($$));
     function defocus(targets) {
         $$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 0.3);
     }
@@ -36,8 +36,8 @@ c3_chart_fn.defocus = function (targetId) {
 c3_chart_fn.revert = function (targetId) {
     var $$ = this.internal,
         candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
-        candidatesForNoneArc = candidates.filter(generateCall($$.isNoneArc, $$)),
-        candidatesForArc = candidates.filter(generateCall($$.isArc, $$));
+        candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)),
+        candidatesForArc = candidates.filter($$.isArc.bind($$));
     function revert(targets) {
         $$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1);
     }

src/arc.js

@@ -193,14 +193,17 @@ c3_chart_internal_fn.descByStartAngle = function (a, b) {
 };
 
 c3_chart_internal_fn.updateTargetsForArc = function (targets) {
-    var $$ = this, main = $$.main, mainPieUpdate, mainPieEnter;
+    var $$ = this, main = $$.main,
+        mainPieUpdate, mainPieEnter,
+        classChartArc = $$.classChartArc.bind($$),
+        classArcs = $$.classArcs.bind($$);
     mainPieUpdate = main.select('.' + CLASS[_chartArcs]).selectAll('.' + CLASS[_chartArc])
         .data($$.pie(targets))
-        .attr("class", generateCall($$.classChartArc, $$));
+        .attr("class", classChartArc);
     mainPieEnter = mainPieUpdate.enter().append("g")
-        .attr("class", generateCall($$.classChartArc, $$));
+        .attr("class", classChartArc);
     mainPieEnter.append('g')
-        .attr('class', generateCall($$.classArcs, $$));
+        .attr('class', classArcs);
     mainPieEnter.append("text")
         .attr("dy", $$.hasType('gauge') ? "-0.35em" : ".35em")
         .style("opacity", 0)
@@ -225,9 +228,9 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
     var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main,
         mainArc;
     mainArc = main.selectAll('.' + CLASS[_arcs]).selectAll('.' + CLASS[_arc])
-        .data(generateCall($$.arcData, $$));
+        .data($$.arcData.bind($$));
     mainArc.enter().append('path')
-        .attr("class", generateCall($$.classArc, $$))
+        .attr("class", $$.classArc.bind($$))
         .style("fill", function (d) { return $$.color(d.data); })
         .style("cursor", function (d) { return config[__data_selection_isselectable](d) ? "pointer" : null; })
         .style("opacity", 0)
@@ -314,8 +317,8 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
     main.selectAll('.' + CLASS[_chartArc]).select('text')
         .style("opacity", 0)
         .attr('class', function (d) { return $$.isGaugeType(d.data) ? CLASS[_gaugeValue] : ''; })
-        .text(generateCall($$.textForArcLabel, $$))
-        .attr("transform", generateCall($$.transformForArcLabel, $$))
+        .text($$.textForArcLabel.bind($$))
+        .attr("transform", $$.transformForArcLabel.bind($$))
         .transition().duration(duration)
         .style("opacity", function (d) { return $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? 1 : 0; });
     main.select('.' + CLASS[_chartArcsTitle])

src/axis.js

@@ -8,7 +8,7 @@ c3_chart_internal_fn.initAxis = function () {
     $$.axes.x.append("text")
         .attr("class", CLASS[_axisXLabel])
         .attr("transform", config[__axis_rotated] ? "rotate(-90)" : "")
-        .style("text-anchor", generateCall($$.textAnchorForXAxisLabel, $$));
+        .style("text-anchor", $$.textAnchorForXAxisLabel.bind($$));
 
     $$.axes.y = main.append("g")
         .attr("class", CLASS[_axis] + ' ' + CLASS[_axisY])
@@ -18,7 +18,7 @@ c3_chart_internal_fn.initAxis = function () {
     $$.axes.y.append("text")
         .attr("class", CLASS[_axisYLabel])
         .attr("transform", config[__axis_rotated] ? "" : "rotate(-90)")
-        .style("text-anchor", generateCall($$.textAnchorForYAxisLabel, $$));
+        .style("text-anchor", $$.textAnchorForYAxisLabel.bind($$));
 
     $$.axes.y2 = main.append("g")
         .attr("class", CLASS[_axis] + ' ' + CLASS[_axisY2])
@@ -28,7 +28,7 @@ c3_chart_internal_fn.initAxis = function () {
     $$.axes.y2.append("text")
         .attr("class", CLASS[_axisY2Label])
         .attr("transform", config[__axis_rotated] ? "" : "rotate(-90)")
-        .style("text-anchor", generateCall($$.textAnchorForY2AxisLabel, $$));
+        .style("text-anchor", $$.textAnchorForY2AxisLabel.bind($$));
 };
 c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues) {
     var $$ = this, config = $$.config,
@@ -265,20 +265,20 @@ c3_chart_internal_fn.updateAxisLabels = function (withTransition) {
         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, $$))
-        .attr("dy", generateCall($$.dyForXAxisLabel, $$))
-        .text(generateCall($$.textForXAxisLabel, $$));
+        .attr("x", $$.xForXAxisLabel.bind($$))
+        .attr("dx", $$.dxForXAxisLabel.bind($$))
+        .attr("dy", $$.dyForXAxisLabel.bind($$))
+        .text($$.textForXAxisLabel.bind($$));
     (withTransition ? axisYLabel.transition() : axisYLabel)
-        .attr("x", generateCall($$.xForYAxisLabel, $$))
-        .attr("dx", generateCall($$.dxForYAxisLabel, $$))
-        .attr("dy", generateCall($$.dyForYAxisLabel, $$))
-        .text(generateCall($$.textForYAxisLabel, $$));
+        .attr("x", $$.xForYAxisLabel.bind($$))
+        .attr("dx", $$.dxForYAxisLabel.bind($$))
+        .attr("dy", $$.dyForYAxisLabel.bind($$))
+        .text($$.textForYAxisLabel.bind($$));
     (withTransition ? axisY2Label.transition() : axisY2Label)
-        .attr("x", generateCall($$.xForY2AxisLabel, $$))
-        .attr("dx", generateCall($$.dxForY2AxisLabel, $$))
-        .attr("dy", generateCall($$.dyForY2AxisLabel, $$))
-        .text(generateCall($$.textForY2AxisLabel, $$));
+        .attr("x", $$.xForY2AxisLabel.bind($$))
+        .attr("dx", $$.dxForY2AxisLabel.bind($$))
+        .attr("dy", $$.dyForY2AxisLabel.bind($$))
+        .text($$.textForY2AxisLabel.bind($$));
 };
 
 c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, all) {

src/core.js

@@ -404,9 +404,9 @@ 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 = generateCall($$.xv, $$),
-        cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$),
-        cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
+    var xv = $$.xv.bind($$),
+        cx = ($$.config[__axis_rotated] ? $$.circleY : $$.circleX).bind($$),
+        cy = ($$.config[__axis_rotated] ? $$.circleX : $$.circleY).bind($$);
 
     options = options || {};
     withY = getOption(options, "withY", true);
@@ -536,7 +536,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
 
     // circles for select
     main.selectAll('.' + CLASS[_selectedCircles])
-        .filter(generateCall($$.isBarType, $$))
+        .filter($$.isBarType.bind($$))
         .selectAll('circle')
         .remove();
 
@@ -676,12 +676,12 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
                 .attr('transform', null)
                 .attr('x', xForText)
                 .attr('y', yForText)
-                .style('fill-opacity', generateCall($$.opacityForText, $$));
+                .style('fill-opacity', $$.opacityForText.bind($$));
             mainRegion
                 .attr('transform', null);
             mainRegion.select('rect').filter($$.isRegionOnX)
-                .attr("x", generateCall($$.regionX, $$))
-                .attr("width", generateCall($$.regionWidth, $$));
+                .attr("x", $$.regionX.bind($$))
+                .attr("width", $$.regionWidth.bind($$));
             $$.updateEventRect();
 
             // callback for end of flow
@@ -831,15 +831,15 @@ c3_chart_internal_fn.updateSvgSize = function () {
         .attr('width', $$.width)
         .attr('height', $$.height);
     $$.svg.select('#' + $$.clipIdForXAxis).select('rect')
-        .attr('x', generateCall($$.getXAxisClipX, $$))
-        .attr('y', generateCall($$.getXAxisClipY, $$))
-        .attr('width', generateCall($$.getXAxisClipWidth, $$))
-        .attr('height', generateCall($$.getXAxisClipHeight, $$));
+        .attr('x', $$.getXAxisClipX.bind($$))
+        .attr('y', $$.getXAxisClipY.bind($$))
+        .attr('width', $$.getXAxisClipWidth.bind($$))
+        .attr('height', $$.getXAxisClipHeight.bind($$));
     $$.svg.select('#' + $$.clipIdForYAxis).select('rect')
-        .attr('x', generateCall($$.getYAxisClipX, $$))
-        .attr('y', generateCall($$.getYAxisClipY, $$))
-        .attr('width', generateCall($$.getYAxisClipWidth, $$))
-        .attr('height', generateCall($$.getYAxisClipHeight, $$));
+        .attr('x', $$.getYAxisClipX.bind($$))
+        .attr('y', $$.getYAxisClipY.bind($$))
+        .attr('width', $$.getYAxisClipWidth.bind($$))
+        .attr('height', $$.getYAxisClipHeight.bind($$));
     $$.svg.select('.' + CLASS[_zoomRect])
         .attr('width', $$.width)
         .attr('height', $$.height);

src/grid.js

@@ -109,7 +109,7 @@ c3_chart_internal_fn.redrawGrid = function (duration, withY) {
             .attr('dy', -5)
             .style("opacity", 0);
         // update
-        yv = generateCall($$.yv, $$);
+        yv = $$.yv.bind($$);
         $$.ygridLines.select('line')
           .transition().duration(duration)
             .attr("x1", config[__axis_rotated] ? yv : 0)
@@ -130,7 +130,7 @@ c3_chart_internal_fn.redrawGrid = function (duration, withY) {
     }
 };
 c3_chart_internal_fn.addTransitionForGrid = function (transitions) {
-    var $$ = this, config = $$.config, xv = generateCall($$.xv, $$);
+    var $$ = this, config = $$.config, xv = $$.xv.bind($$);
     transitions.push($$.xgridLines.select('line').transition()
                      .attr("x1", config[__axis_rotated] ? 0 : xv)
                      .attr("x2", config[__axis_rotated] ? $$.width : xv)
@@ -145,16 +145,17 @@ c3_chart_internal_fn.addTransitionForGrid = function (transitions) {
 };
 c3_chart_internal_fn.showXGridFocus = function (selectedData) {
     var $$ = this, config = $$.config,
-        dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); });
+        dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); }),
+        focusEl = $$.main.selectAll('line.' + CLASS[_xgridFocus]),
+        xx = $$.xx.bind($$);
     if (! config[__tooltip_show]) { return; }
     // Hide when scatter plot exists
     if ($$.hasType('scatter') || $$.hasArcType()) { return; }
-    var focusEl = $$.main.selectAll('line.' + CLASS[_xgridFocus]);
     focusEl
         .style("visibility", "visible")
         .data([dataToShow[0]])
-        .attr(config[__axis_rotated] ? 'y1' : 'x1', generateCall($$.xx, $$))
-        .attr(config[__axis_rotated] ? 'y2' : 'x2', generateCall($$.xx, $$));
+        .attr(config[__axis_rotated] ? 'y1' : 'x1', xx)
+        .attr(config[__axis_rotated] ? 'y2' : 'x2', xx);
     $$.smoothLines(focusEl, 'grid');
 };
 c3_chart_internal_fn.hideXGridFocus = function () {

src/interaction.js

@@ -90,7 +90,7 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
 c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
     var $$ = this, d3 = $$.d3, config = $$.config;
     eventRectEnter.append("rect")
-        .attr("class", generateCall($$.classEvent, $$))
+        .attr("class", $$.classEvent.bind($$))
         .style("cursor", config[__data_selection_enabled] && config[__data_selection_grouped] ? "pointer" : null)
         .on('mouseover', function (d) {
             var index = d.index, selectedData, newData;

src/region.js

@@ -9,20 +9,24 @@ c3_chart_internal_fn.redrawRegion = function (duration) {
     $$.mainRegion = $$.main.select('.' + CLASS[_regions]).selectAll('.' + CLASS[_region])
         .data(config[__regions]);
     $$.mainRegion.enter().append('g')
-        .attr('class', generateCall($$.classRegion, $$))
+        .attr('class', $$.classRegion.bind($$))
       .append('rect')
         .style("fill-opacity", 0);
     $$.mainRegion.exit().transition().duration(duration)
         .style("opacity", 0)
         .remove();
 };
 c3_chart_internal_fn.addTransitionForRegion = function (transitions) {
-    var $$ = this;
+    var $$ = this,
+        x = $$.regionX.bind($$),
+        y = $$.regionY.bind($$),
+        w = $$.regionWidth.bind($$),
+        h = $$.regionHeight.bind($$);
     transitions.push($$.mainRegion.selectAll('rect').transition()
-                     .attr("x", generateCall($$.regionX, $$))
-                     .attr("y", generateCall($$.regionY, $$))
-                     .attr("width", generateCall($$.regionWidth, $$))
-                     .attr("height", generateCall($$.regionHeight, $$))
+                     .attr("x", x)
+                     .attr("y", y)
+                     .attr("width", w)
+                     .attr("height", h)
                      .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }));
 };
 c3_chart_internal_fn.regionX = function (d) {

src/selection.js

@@ -1,8 +1,8 @@
 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, $$);
-
+        cx = (config[__axis_rotated] ? $$.circleY : $$.circleX).bind($$),
+        cy = (config[__axis_rotated] ? $$.circleX : $$.circleY).bind($$),
+        r = $$.pointSelectR.bind($$);
     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)
@@ -14,7 +14,7 @@ c3_chart_internal_fn.selectPoint = function (target, d, i) {
         .attr("stroke", function () { return $$.color(d); })
         .attr("r", function (d) { return $$.pointSelectR(d) * 1.4; })
         .transition().duration(100)
-        .attr("r", generateCall($$.pointSelectR, $$));
+        .attr("r", r);
 };
 c3_chart_internal_fn.unselectPoint = function (target, d, i) {
     var $$ = this;

src/shape.bar.js

@@ -22,15 +22,19 @@ c3_chart_internal_fn.updateTargetsForBar = function (targets) {
 
 };
 c3_chart_internal_fn.redrawBar = function (durationForExit) {
-    var $$ = this, CLASS = $$.CLASS;
+    var $$ = this, CLASS = $$.CLASS,
+        barData = $$.barData.bind($$),
+        classBar = $$.classBar.bind($$),
+        initialOpacity = $$.initialOpacity.bind($$),
+        color = function (d) { return $$.color(d.id); };
     $$.mainBar = $$.main.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar])
-        .data(generateCall($$.barData, $$));
+        .data(barData);
     $$.mainBar.enter().append('path')
-        .attr("class", generateCall($$.classBar, $$))
-        .style("stroke", function (d) { return $$.color(d.id); })
-        .style("fill", function (d) { return $$.color(d.id); });
+        .attr("class", classBar)
+        .style("stroke", color)
+        .style("fill", color);
     $$.mainBar
-        .style("opacity", generateCall($$.initialOpacity, $$));
+        .style("opacity", initialOpacity);
     $$.mainBar.exit().transition().duration(durationForExit)
         .style('opacity', 0)
         .remove();

src/shape.line.js

@@ -306,17 +306,19 @@ c3_chart_internal_fn.getCircles = function (i, id) {
     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;
+    var $$ = this,
+        r = $$.pointExpandedR.bind($$);
     $$.getCircles(i, id)
         .classed(CLASS[_EXPANDED], true)
-        .attr('r', generateCall($$.pointExpandedR, $$));
+        .attr('r', r);
 };
 c3_chart_internal_fn.unexpandCircles = function (i) {
-    var $$ = this;
+    var $$ = this,
+        r = $$.pointR.bind($$);
     $$.getCircles(i)
         .filter(function () { return $$.d3.select(this).classed(CLASS[_EXPANDED]); })
         .classed(CLASS[_EXPANDED], false)
-        .attr('r', generateCall($$.pointR, $$));
+        .attr('r', r);
 };
 c3_chart_internal_fn.pointR = function (d) {
     var $$ = this, config = $$.config;