Browse Source

Use bind instead of my function

pull/486/head
Masayuki Tanaka 11 years ago
parent
commit
0b4a32408e
  1. 218
      c3.js
  2. 8
      c3.min.js
  3. 12
      src/api.js
  4. 19
      src/arc.js
  5. 30
      src/axis.js
  6. 30
      src/core.js
  7. 13
      src/grid.js
  8. 2
      src/interaction.js
  9. 16
      src/region.js
  10. 8
      src/selection.js
  11. 16
      src/shape.bar.js
  12. 10
      src/shape.line.js
  13. 46
      src/subchart.js
  14. 13
      src/text.js
  15. 3
      src/util.js

218
c3.js

@ -409,9 +409,9 @@
var drawArea, drawBar, drawLine, xForText, yForText; var drawArea, drawBar, drawLine, xForText, yForText;
var duration, durationForExit, durationForAxis, waitForDraw; var duration, durationForExit, durationForAxis, waitForDraw;
var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling; var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling;
var xv = generateCall($$.xv, $$), var xv = $$.xv.bind($$),
cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$), cx = ($$.config[__axis_rotated] ? $$.circleY : $$.circleX).bind($$),
cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$); cy = ($$.config[__axis_rotated] ? $$.circleX : $$.circleY).bind($$);
options = options || {}; options = options || {};
withY = getOption(options, "withY", true); withY = getOption(options, "withY", true);
@ -541,7 +541,7 @@
// circles for select // circles for select
main.selectAll('.' + CLASS[_selectedCircles]) main.selectAll('.' + CLASS[_selectedCircles])
.filter(generateCall($$.isBarType, $$)) .filter($$.isBarType.bind($$))
.selectAll('circle') .selectAll('circle')
.remove(); .remove();
@ -681,12 +681,12 @@
.attr('transform', null) .attr('transform', null)
.attr('x', xForText) .attr('x', xForText)
.attr('y', yForText) .attr('y', yForText)
.style('fill-opacity', generateCall($$.opacityForText, $$)); .style('fill-opacity', $$.opacityForText.bind($$));
mainRegion mainRegion
.attr('transform', null); .attr('transform', null);
mainRegion.select('rect').filter($$.isRegionOnX) mainRegion.select('rect').filter($$.isRegionOnX)
.attr("x", generateCall($$.regionX, $$)) .attr("x", $$.regionX.bind($$))
.attr("width", generateCall($$.regionWidth, $$)); .attr("width", $$.regionWidth.bind($$));
$$.updateEventRect(); $$.updateEventRect();
// callback for end of flow // callback for end of flow
@ -836,15 +836,15 @@
.attr('width', $$.width) .attr('width', $$.width)
.attr('height', $$.height); .attr('height', $$.height);
$$.svg.select('#' + $$.clipIdForXAxis).select('rect') $$.svg.select('#' + $$.clipIdForXAxis).select('rect')
.attr('x', generateCall($$.getXAxisClipX, $$)) .attr('x', $$.getXAxisClipX.bind($$))
.attr('y', generateCall($$.getXAxisClipY, $$)) .attr('y', $$.getXAxisClipY.bind($$))
.attr('width', generateCall($$.getXAxisClipWidth, $$)) .attr('width', $$.getXAxisClipWidth.bind($$))
.attr('height', generateCall($$.getXAxisClipHeight, $$)); .attr('height', $$.getXAxisClipHeight.bind($$));
$$.svg.select('#' + $$.clipIdForYAxis).select('rect') $$.svg.select('#' + $$.clipIdForYAxis).select('rect')
.attr('x', generateCall($$.getYAxisClipX, $$)) .attr('x', $$.getYAxisClipX.bind($$))
.attr('y', generateCall($$.getYAxisClipY, $$)) .attr('y', $$.getYAxisClipY.bind($$))
.attr('width', generateCall($$.getYAxisClipWidth, $$)) .attr('width', $$.getYAxisClipWidth.bind($$))
.attr('height', generateCall($$.getYAxisClipHeight, $$)); .attr('height', $$.getYAxisClipHeight.bind($$));
$$.svg.select('.' + CLASS[_zoomRect]) $$.svg.select('.' + CLASS[_zoomRect])
.attr('width', $$.width) .attr('width', $$.width)
.attr('height', $$.height); .attr('height', $$.height);
@ -2309,7 +2309,7 @@
c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) { c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
var $$ = this, d3 = $$.d3, config = $$.config; var $$ = this, d3 = $$.d3, config = $$.config;
eventRectEnter.append("rect") eventRectEnter.append("rect")
.attr("class", generateCall($$.classEvent, $$)) .attr("class", $$.classEvent.bind($$))
.style("cursor", config[__data_selection_enabled] && config[__data_selection_grouped] ? "pointer" : null) .style("cursor", config[__data_selection_enabled] && config[__data_selection_grouped] ? "pointer" : null)
.on('mouseover', function (d) { .on('mouseover', function (d) {
var index = d.index, selectedData, newData; var index = d.index, selectedData, newData;
@ -2983,17 +2983,19 @@
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) { c3_chart_internal_fn.expandCircles = function (i, id) {
var $$ = this; var $$ = this,
r = $$.pointExpandedR.bind($$);
$$.getCircles(i, id) $$.getCircles(i, id)
.classed(CLASS[_EXPANDED], true) .classed(CLASS[_EXPANDED], true)
.attr('r', generateCall($$.pointExpandedR, $$)); .attr('r', r);
}; };
c3_chart_internal_fn.unexpandCircles = function (i) { c3_chart_internal_fn.unexpandCircles = function (i) {
var $$ = this; var $$ = this,
r = $$.pointR.bind($$);
$$.getCircles(i) $$.getCircles(i)
.filter(function () { return $$.d3.select(this).classed(CLASS[_EXPANDED]); }) .filter(function () { return $$.d3.select(this).classed(CLASS[_EXPANDED]); })
.classed(CLASS[_EXPANDED], false) .classed(CLASS[_EXPANDED], false)
.attr('r', generateCall($$.pointR, $$)); .attr('r', r);
}; };
c3_chart_internal_fn.pointR = function (d) { c3_chart_internal_fn.pointR = function (d) {
var $$ = this, config = $$.config; var $$ = this, config = $$.config;
@ -3038,15 +3040,19 @@
}; };
c3_chart_internal_fn.redrawBar = function (durationForExit) { 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]) $$.mainBar = $$.main.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar])
.data(generateCall($$.barData, $$)); .data(barData);
$$.mainBar.enter().append('path') $$.mainBar.enter().append('path')
.attr("class", generateCall($$.classBar, $$)) .attr("class", classBar)
.style("stroke", function (d) { return $$.color(d.id); }) .style("stroke", color)
.style("fill", function (d) { return $$.color(d.id); }); .style("fill", color);
$$.mainBar $$.mainBar
.style("opacity", generateCall($$.initialOpacity, $$)); .style("opacity", initialOpacity);
$$.mainBar.exit().transition().duration(durationForExit) $$.mainBar.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
@ -3150,11 +3156,13 @@
.attr('class', classTexts); .attr('class', classTexts);
}; };
c3_chart_internal_fn.redrawText = function (durationForExit) { c3_chart_internal_fn.redrawText = function (durationForExit) {
var $$ = this, config = $$.config, CLASS = $$.CLASS; var $$ = this, config = $$.config, CLASS = $$.CLASS,
barOrLineData = $$.barOrLineData.bind($$),
classText = $$.classText.bind($$);
$$.mainText = $$.main.selectAll('.' + CLASS[_texts]).selectAll('.' + CLASS[_text]) $$.mainText = $$.main.selectAll('.' + CLASS[_texts]).selectAll('.' + CLASS[_text])
.data(generateCall($$.barOrLineData, $$)); .data(barOrLineData);
$$.mainText.enter().append('text') $$.mainText.enter().append('text')
.attr("class", generateCall($$.classText, $$)) .attr("class", classText)
.attr('text-anchor', function (d) { return config[__axis_rotated] ? (d.value < 0 ? 'end' : 'start') : 'middle'; }) .attr('text-anchor', function (d) { return config[__axis_rotated] ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
.style("stroke", 'none') .style("stroke", 'none')
.style("fill", function (d) { return $$.color(d); }) .style("fill", function (d) { return $$.color(d); })
@ -3167,12 +3175,13 @@
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yForText, forFlow) { c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yForText, forFlow) {
var $$ = this; var $$ = this,
opacityForText = forFlow ? 0 : $$.opacityForText.bind($$);
transitions.push($$.mainText.transition() transitions.push($$.mainText.transition()
.attr('x', xForText) .attr('x', xForText)
.attr('y', yForText) .attr('y', yForText)
.style("fill", $$.color) .style("fill", $$.color)
.style("fill-opacity", forFlow ? 0 : generateCall($$.opacityForText, $$))); .style("fill-opacity", opacityForText));
}; };
c3_chart_internal_fn.getTextRect = function (text, cls) { c3_chart_internal_fn.getTextRect = function (text, cls) {
var rect; var rect;
@ -3408,7 +3417,7 @@
.attr('dy', -5) .attr('dy', -5)
.style("opacity", 0); .style("opacity", 0);
// update // update
yv = generateCall($$.yv, $$); yv = $$.yv.bind($$);
$$.ygridLines.select('line') $$.ygridLines.select('line')
.transition().duration(duration) .transition().duration(duration)
.attr("x1", config[__axis_rotated] ? yv : 0) .attr("x1", config[__axis_rotated] ? yv : 0)
@ -3429,7 +3438,7 @@
} }
}; };
c3_chart_internal_fn.addTransitionForGrid = function (transitions) { 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() transitions.push($$.xgridLines.select('line').transition()
.attr("x1", config[__axis_rotated] ? 0 : xv) .attr("x1", config[__axis_rotated] ? 0 : xv)
.attr("x2", config[__axis_rotated] ? $$.width : xv) .attr("x2", config[__axis_rotated] ? $$.width : xv)
@ -3444,16 +3453,17 @@
}; };
c3_chart_internal_fn.showXGridFocus = function (selectedData) { c3_chart_internal_fn.showXGridFocus = function (selectedData) {
var $$ = this, config = $$.config, 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; } if (! config[__tooltip_show]) { return; }
// Hide when scatter plot exists // Hide when scatter plot exists
if ($$.hasType('scatter') || $$.hasArcType()) { return; } if ($$.hasType('scatter') || $$.hasArcType()) { return; }
var focusEl = $$.main.selectAll('line.' + CLASS[_xgridFocus]);
focusEl focusEl
.style("visibility", "visible") .style("visibility", "visible")
.data([dataToShow[0]]) .data([dataToShow[0]])
.attr(config[__axis_rotated] ? 'y1' : 'x1', generateCall($$.xx, $$)) .attr(config[__axis_rotated] ? 'y1' : 'x1', xx)
.attr(config[__axis_rotated] ? 'y2' : 'x2', generateCall($$.xx, $$)); .attr(config[__axis_rotated] ? 'y2' : 'x2', xx);
$$.smoothLines(focusEl, 'grid'); $$.smoothLines(focusEl, 'grid');
}; };
c3_chart_internal_fn.hideXGridFocus = function () { c3_chart_internal_fn.hideXGridFocus = function () {
@ -3917,7 +3927,7 @@
$$.axes.x.append("text") $$.axes.x.append("text")
.attr("class", CLASS[_axisXLabel]) .attr("class", CLASS[_axisXLabel])
.attr("transform", config[__axis_rotated] ? "rotate(-90)" : "") .attr("transform", config[__axis_rotated] ? "rotate(-90)" : "")
.style("text-anchor", generateCall($$.textAnchorForXAxisLabel, $$)); .style("text-anchor", $$.textAnchorForXAxisLabel.bind($$));
$$.axes.y = main.append("g") $$.axes.y = main.append("g")
.attr("class", CLASS[_axis] + ' ' + CLASS[_axisY]) .attr("class", CLASS[_axis] + ' ' + CLASS[_axisY])
@ -3927,7 +3937,7 @@
$$.axes.y.append("text") $$.axes.y.append("text")
.attr("class", CLASS[_axisYLabel]) .attr("class", CLASS[_axisYLabel])
.attr("transform", config[__axis_rotated] ? "" : "rotate(-90)") .attr("transform", config[__axis_rotated] ? "" : "rotate(-90)")
.style("text-anchor", generateCall($$.textAnchorForYAxisLabel, $$)); .style("text-anchor", $$.textAnchorForYAxisLabel.bind($$));
$$.axes.y2 = main.append("g") $$.axes.y2 = main.append("g")
.attr("class", CLASS[_axis] + ' ' + CLASS[_axisY2]) .attr("class", CLASS[_axis] + ' ' + CLASS[_axisY2])
@ -3937,7 +3947,7 @@
$$.axes.y2.append("text") $$.axes.y2.append("text")
.attr("class", CLASS[_axisY2Label]) .attr("class", CLASS[_axisY2Label])
.attr("transform", config[__axis_rotated] ? "" : "rotate(-90)") .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) { c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
@ -4174,20 +4184,20 @@
axisYLabel = $$.main.select('.' + CLASS[_axisY] + ' .' + CLASS[_axisYLabel]), axisYLabel = $$.main.select('.' + CLASS[_axisY] + ' .' + CLASS[_axisYLabel]),
axisY2Label = $$.main.select('.' + CLASS[_axisY2] + ' .' + CLASS[_axisY2Label]); axisY2Label = $$.main.select('.' + CLASS[_axisY2] + ' .' + CLASS[_axisY2Label]);
(withTransition ? axisXLabel.transition() : axisXLabel) (withTransition ? axisXLabel.transition() : axisXLabel)
.attr("x", generateCall($$.xForXAxisLabel, $$)) .attr("x", $$.xForXAxisLabel.bind($$))
.attr("dx", generateCall($$.dxForXAxisLabel, $$)) .attr("dx", $$.dxForXAxisLabel.bind($$))
.attr("dy", generateCall($$.dyForXAxisLabel, $$)) .attr("dy", $$.dyForXAxisLabel.bind($$))
.text(generateCall($$.textForXAxisLabel, $$)); .text($$.textForXAxisLabel.bind($$));
(withTransition ? axisYLabel.transition() : axisYLabel) (withTransition ? axisYLabel.transition() : axisYLabel)
.attr("x", generateCall($$.xForYAxisLabel, $$)) .attr("x", $$.xForYAxisLabel.bind($$))
.attr("dx", generateCall($$.dxForYAxisLabel, $$)) .attr("dx", $$.dxForYAxisLabel.bind($$))
.attr("dy", generateCall($$.dyForYAxisLabel, $$)) .attr("dy", $$.dyForYAxisLabel.bind($$))
.text(generateCall($$.textForYAxisLabel, $$)); .text($$.textForYAxisLabel.bind($$));
(withTransition ? axisY2Label.transition() : axisY2Label) (withTransition ? axisY2Label.transition() : axisY2Label)
.attr("x", generateCall($$.xForY2AxisLabel, $$)) .attr("x", $$.xForY2AxisLabel.bind($$))
.attr("dx", generateCall($$.dxForY2AxisLabel, $$)) .attr("dx", $$.dxForY2AxisLabel.bind($$))
.attr("dy", generateCall($$.dyForY2AxisLabel, $$)) .attr("dy", $$.dyForY2AxisLabel.bind($$))
.text(generateCall($$.textForY2AxisLabel, $$)); .text($$.textForY2AxisLabel.bind($$));
}; };
c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, all) { c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, all) {
@ -4491,14 +4501,17 @@
}; };
c3_chart_internal_fn.updateTargetsForArc = function (targets) { 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]) mainPieUpdate = main.select('.' + CLASS[_chartArcs]).selectAll('.' + CLASS[_chartArc])
.data($$.pie(targets)) .data($$.pie(targets))
.attr("class", generateCall($$.classChartArc, $$)); .attr("class", classChartArc);
mainPieEnter = mainPieUpdate.enter().append("g") mainPieEnter = mainPieUpdate.enter().append("g")
.attr("class", generateCall($$.classChartArc, $$)); .attr("class", classChartArc);
mainPieEnter.append('g') mainPieEnter.append('g')
.attr('class', generateCall($$.classArcs, $$)); .attr('class', classArcs);
mainPieEnter.append("text") mainPieEnter.append("text")
.attr("dy", $$.hasType('gauge') ? "-0.35em" : ".35em") .attr("dy", $$.hasType('gauge') ? "-0.35em" : ".35em")
.style("opacity", 0) .style("opacity", 0)
@ -4523,9 +4536,9 @@
var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main, var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main,
mainArc; mainArc;
mainArc = main.selectAll('.' + CLASS[_arcs]).selectAll('.' + CLASS[_arc]) mainArc = main.selectAll('.' + CLASS[_arcs]).selectAll('.' + CLASS[_arc])
.data(generateCall($$.arcData, $$)); .data($$.arcData.bind($$));
mainArc.enter().append('path') mainArc.enter().append('path')
.attr("class", generateCall($$.classArc, $$)) .attr("class", $$.classArc.bind($$))
.style("fill", function (d) { return $$.color(d.data); }) .style("fill", function (d) { return $$.color(d.data); })
.style("cursor", function (d) { return config[__data_selection_isselectable](d) ? "pointer" : null; }) .style("cursor", function (d) { return config[__data_selection_isselectable](d) ? "pointer" : null; })
.style("opacity", 0) .style("opacity", 0)
@ -4612,8 +4625,8 @@
main.selectAll('.' + CLASS[_chartArc]).select('text') main.selectAll('.' + CLASS[_chartArc]).select('text')
.style("opacity", 0) .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, $$)) .text($$.textForArcLabel.bind($$))
.attr("transform", generateCall($$.transformForArcLabel, $$)) .attr("transform", $$.transformForArcLabel.bind($$))
.transition().duration(duration) .transition().duration(duration)
.style("opacity", function (d) { return $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? 1 : 0; }); .style("opacity", function (d) { return $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? 1 : 0; });
main.select('.' + CLASS[_chartArcsTitle]) main.select('.' + CLASS[_chartArcsTitle])
@ -4667,7 +4680,7 @@
$$.mainRegion = $$.main.select('.' + CLASS[_regions]).selectAll('.' + CLASS[_region]) $$.mainRegion = $$.main.select('.' + CLASS[_regions]).selectAll('.' + CLASS[_region])
.data(config[__regions]); .data(config[__regions]);
$$.mainRegion.enter().append('g') $$.mainRegion.enter().append('g')
.attr('class', generateCall($$.classRegion, $$)) .attr('class', $$.classRegion.bind($$))
.append('rect') .append('rect')
.style("fill-opacity", 0); .style("fill-opacity", 0);
$$.mainRegion.exit().transition().duration(duration) $$.mainRegion.exit().transition().duration(duration)
@ -4675,12 +4688,16 @@
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForRegion = function (transitions) { 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() transitions.push($$.mainRegion.selectAll('rect').transition()
.attr("x", generateCall($$.regionX, $$)) .attr("x", x)
.attr("y", generateCall($$.regionY, $$)) .attr("y", y)
.attr("width", generateCall($$.regionWidth, $$)) .attr("width", w)
.attr("height", generateCall($$.regionHeight, $$)) .attr("height", h)
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; })); .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }));
}; };
c3_chart_internal_fn.regionX = function (d) { c3_chart_internal_fn.regionX = function (d) {
@ -4814,9 +4831,9 @@
c3_chart_internal_fn.selectPoint = function (target, d, i) { c3_chart_internal_fn.selectPoint = function (target, d, i) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
cx = generateCall(config[__axis_rotated] ? $$.circleY : $$.circleX, $$), cx = (config[__axis_rotated] ? $$.circleY : $$.circleX).bind($$),
cy = generateCall(config[__axis_rotated] ? $$.circleX : $$.circleY, $$); cy = (config[__axis_rotated] ? $$.circleX : $$.circleY).bind($$),
r = $$.pointSelectR.bind($$);
config[__data_onselected].call($$.api, d, target.node()); config[__data_onselected].call($$.api, d, target.node());
// add selected-circle on low layer g // 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)
@ -4828,7 +4845,7 @@
.attr("stroke", function () { return $$.color(d); }) .attr("stroke", function () { return $$.color(d); })
.attr("r", function (d) { return $$.pointSelectR(d) * 1.4; }) .attr("r", function (d) { return $$.pointSelectR(d) * 1.4; })
.transition().duration(100) .transition().duration(100)
.attr("r", generateCall($$.pointSelectR, $$)); .attr("r", r);
}; };
c3_chart_internal_fn.unselectPoint = function (target, d, i) { c3_chart_internal_fn.unselectPoint = function (target, d, i) {
var $$ = this; var $$ = this;
@ -4944,38 +4961,48 @@
}; };
c3_chart_internal_fn.updateTargetsForSubchart = function (targets) { c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
var $$ = this, context = $$.context, config = $$.config, var $$ = this, context = $$.context, config = $$.config,
contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate; contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate,
classChartBar = $$.classChartBar.bind($$),
classBars = $$.classBars.bind($$),
classChartLine = $$.classChartLine.bind($$),
classLines = $$.classLines.bind($$),
classAreas = $$.classAreas.bind($$);
if (config[__subchart_show]) { if (config[__subchart_show]) {
contextBarUpdate = context.select('.' + CLASS[_chartBars]).selectAll('.' + CLASS[_chartBar]) contextBarUpdate = context.select('.' + CLASS[_chartBars]).selectAll('.' + CLASS[_chartBar])
.data(targets) .data(targets)
.attr('class', generateCall($$.classChartBar, $$)); .attr('class', classChartBar);
contextBarEnter = contextBarUpdate.enter().append('g') contextBarEnter = contextBarUpdate.enter().append('g')
.style('opacity', 0) .style('opacity', 0)
.attr('class', generateCall($$.classChartBar, $$)); .attr('class', classChartBar);
// Bars for each data // Bars for each data
contextBarEnter.append('g') contextBarEnter.append('g')
.attr("class", generateCall($$.classBars, $$)); .attr("class", classBars);
//-- Line --// //-- Line --//
contextLineUpdate = context.select('.' + CLASS[_chartLines]).selectAll('.' + CLASS[_chartLine]) contextLineUpdate = context.select('.' + CLASS[_chartLines]).selectAll('.' + CLASS[_chartLine])
.data(targets) .data(targets)
.attr('class', generateCall($$.classChartLine, $$)); .attr('class', classChartLine);
contextLineEnter = contextLineUpdate.enter().append('g') contextLineEnter = contextLineUpdate.enter().append('g')
.style('opacity', 0) .style('opacity', 0)
.attr('class', generateCall($$.classChartLine, $$)); .attr('class', classChartLine);
// Lines for each data // Lines for each data
contextLineEnter.append("g") contextLineEnter.append("g")
.attr("class", generateCall($$.classLines, $$)); .attr("class", classLines);
// Area // Area
contextLineEnter.append("g") contextLineEnter.append("g")
.attr("class", generateCall($$.classAreas, $$)); .attr("class", classAreas);
} }
}; };
c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, duration, durationForExit, areaIndices, barIndices, lineIndices) { c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, duration, durationForExit, areaIndices, barIndices, lineIndices) {
var $$ = this, d3 = $$.d3, context = $$.context, config = $$.config, var $$ = this, d3 = $$.d3, context = $$.context, config = $$.config,
contextLine, contextArea, contextBar, drawAreaOnSub, drawBarOnSub, drawLineOnSub; contextLine, contextArea, contextBar, drawAreaOnSub, drawBarOnSub, drawLineOnSub,
barData = $$.barData.bind($$),
lineData = $$.lineData.bind($$),
classBar = $$.classBar.bind($$),
classLine = $$.classLine.bind($$),
classArea = $$.classArea.bind($$),
initialOpacity = $$.initialOpacity.bind($$);
// subchart // subchart
if (config[__subchart_show]) { if (config[__subchart_show]) {
@ -5001,13 +5028,13 @@
drawLineOnSub = $$.generateDrawLine(lineIndices, true); drawLineOnSub = $$.generateDrawLine(lineIndices, true);
// bars // bars
contextBar = context.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar]) contextBar = context.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar])
.data(generateCall($$.barData, $$)); .data(barData);
contextBar.enter().append('path') contextBar.enter().append('path')
.attr("class", generateCall($$.classBar, $$)) .attr("class", classBar)
.style("stroke", 'none') .style("stroke", 'none')
.style("fill", $$.color); .style("fill", $$.color);
contextBar contextBar
.style("opacity", generateCall($$.initialOpacity, $$)) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr('d', drawBarOnSub) .attr('d', drawBarOnSub)
.style('opacity', 1); .style('opacity', 1);
@ -5016,12 +5043,12 @@
.remove(); .remove();
// lines // lines
contextLine = context.selectAll('.' + CLASS[_lines]).selectAll('.' + CLASS[_line]) contextLine = context.selectAll('.' + CLASS[_lines]).selectAll('.' + CLASS[_line])
.data(generateCall($$.lineData, $$)); .data(lineData);
contextLine.enter().append('path') contextLine.enter().append('path')
.attr('class', generateCall($$.classLine, $$)) .attr('class', classLine)
.style('stroke', $$.color); .style('stroke', $$.color);
contextLine contextLine
.style("opacity", generateCall($$.initialOpacity, $$)) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr("d", drawLineOnSub) .attr("d", drawLineOnSub)
.style('opacity', 1); .style('opacity', 1);
@ -5030,9 +5057,9 @@
.remove(); .remove();
// area // area
contextArea = context.selectAll('.' + CLASS[_areas]).selectAll('.' + CLASS[_area]) contextArea = context.selectAll('.' + CLASS[_areas]).selectAll('.' + CLASS[_area])
.data(generateCall($$.lineData, $$)); .data(lineData);
contextArea.enter().append('path') contextArea.enter().append('path')
.attr("class", generateCall($$.classArea, $$)) .attr("class", classArea)
.style("fill", $$.color) .style("fill", $$.color)
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }); .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
contextArea contextArea
@ -5504,16 +5531,13 @@
items = [path.pathSegList.getItem(0), path.pathSegList.getItem(1)], items = [path.pathSegList.getItem(0), path.pathSegList.getItem(1)],
minX = items[0].x, minY = Math.min(items[0].y, items[1].y); minX = items[0].x, minY = Math.min(items[0].y, items[1].y);
return {x: minX, y: minY, width: box.width, height: box.height}; return {x: minX, y: minY, width: box.width, height: box.height};
},
generateCall = c3_chart_internal_fn.generateCall = function (f, context) {
return function (d, i) { return f.call(context, d, i); };
}; };
c3_chart_fn.focus = function (targetId) { c3_chart_fn.focus = function (targetId) {
var $$ = this.internal, var $$ = this.internal,
candidates = $$.svg.selectAll($$.selectorTarget(targetId)), candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
candidatesForNoneArc = candidates.filter(generateCall($$.isNoneArc, $$)), candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)),
candidatesForArc = candidates.filter(generateCall($$.isArc, $$)); candidatesForArc = candidates.filter($$.isArc.bind($$));
function focus(targets) { function focus(targets) {
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1); $$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1);
} }
@ -5530,8 +5554,8 @@
c3_chart_fn.defocus = function (targetId) { c3_chart_fn.defocus = function (targetId) {
var $$ = this.internal, var $$ = this.internal,
candidates = $$.svg.selectAll($$.selectorTarget(targetId)), candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
candidatesForNoneArc = candidates.filter(generateCall($$.isNoneArc, $$)), candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)),
candidatesForArc = candidates.filter(generateCall($$.isArc, $$)); candidatesForArc = candidates.filter($$.isArc.bind($$));
function defocus(targets) { function defocus(targets) {
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 0.3); $$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 0.3);
} }
@ -5547,8 +5571,8 @@
c3_chart_fn.revert = function (targetId) { c3_chart_fn.revert = function (targetId) {
var $$ = this.internal, var $$ = this.internal,
candidates = $$.svg.selectAll($$.selectorTarget(targetId)), candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
candidatesForNoneArc = candidates.filter(generateCall($$.isNoneArc, $$)), candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)),
candidatesForArc = candidates.filter(generateCall($$.isArc, $$)); candidatesForArc = candidates.filter($$.isArc.bind($$));
function revert(targets) { function revert(targets) {
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1); $$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1);
} }

8
c3.min.js vendored

File diff suppressed because one or more lines are too long

12
src/api.js

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

19
src/arc.js

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

30
src/axis.js

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

30
src/core.js

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

13
src/grid.js

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

2
src/interaction.js

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

16
src/region.js

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

8
src/selection.js

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

16
src/shape.bar.js

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

10
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 : '')); return (id ? $$.main.selectAll('.' + CLASS[_circles] + $$.getTargetSelectorSuffix(id)) : $$.main).selectAll('.' + CLASS[_circle] + (isValue(i) ? '-' + i : ''));
}; };
c3_chart_internal_fn.expandCircles = function (i, id) { c3_chart_internal_fn.expandCircles = function (i, id) {
var $$ = this; var $$ = this,
r = $$.pointExpandedR.bind($$);
$$.getCircles(i, id) $$.getCircles(i, id)
.classed(CLASS[_EXPANDED], true) .classed(CLASS[_EXPANDED], true)
.attr('r', generateCall($$.pointExpandedR, $$)); .attr('r', r);
}; };
c3_chart_internal_fn.unexpandCircles = function (i) { c3_chart_internal_fn.unexpandCircles = function (i) {
var $$ = this; var $$ = this,
r = $$.pointR.bind($$);
$$.getCircles(i) $$.getCircles(i)
.filter(function () { return $$.d3.select(this).classed(CLASS[_EXPANDED]); }) .filter(function () { return $$.d3.select(this).classed(CLASS[_EXPANDED]); })
.classed(CLASS[_EXPANDED], false) .classed(CLASS[_EXPANDED], false)
.attr('r', generateCall($$.pointR, $$)); .attr('r', r);
}; };
c3_chart_internal_fn.pointR = function (d) { c3_chart_internal_fn.pointR = function (d) {
var $$ = this, config = $$.config; var $$ = this, config = $$.config;

46
src/subchart.js

@ -47,38 +47,48 @@ c3_chart_internal_fn.initSubchart = function () {
}; };
c3_chart_internal_fn.updateTargetsForSubchart = function (targets) { c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
var $$ = this, context = $$.context, config = $$.config, var $$ = this, context = $$.context, config = $$.config,
contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate; contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate,
classChartBar = $$.classChartBar.bind($$),
classBars = $$.classBars.bind($$),
classChartLine = $$.classChartLine.bind($$),
classLines = $$.classLines.bind($$),
classAreas = $$.classAreas.bind($$);
if (config[__subchart_show]) { if (config[__subchart_show]) {
contextBarUpdate = context.select('.' + CLASS[_chartBars]).selectAll('.' + CLASS[_chartBar]) contextBarUpdate = context.select('.' + CLASS[_chartBars]).selectAll('.' + CLASS[_chartBar])
.data(targets) .data(targets)
.attr('class', generateCall($$.classChartBar, $$)); .attr('class', classChartBar);
contextBarEnter = contextBarUpdate.enter().append('g') contextBarEnter = contextBarUpdate.enter().append('g')
.style('opacity', 0) .style('opacity', 0)
.attr('class', generateCall($$.classChartBar, $$)); .attr('class', classChartBar);
// Bars for each data // Bars for each data
contextBarEnter.append('g') contextBarEnter.append('g')
.attr("class", generateCall($$.classBars, $$)); .attr("class", classBars);
//-- Line --// //-- Line --//
contextLineUpdate = context.select('.' + CLASS[_chartLines]).selectAll('.' + CLASS[_chartLine]) contextLineUpdate = context.select('.' + CLASS[_chartLines]).selectAll('.' + CLASS[_chartLine])
.data(targets) .data(targets)
.attr('class', generateCall($$.classChartLine, $$)); .attr('class', classChartLine);
contextLineEnter = contextLineUpdate.enter().append('g') contextLineEnter = contextLineUpdate.enter().append('g')
.style('opacity', 0) .style('opacity', 0)
.attr('class', generateCall($$.classChartLine, $$)); .attr('class', classChartLine);
// Lines for each data // Lines for each data
contextLineEnter.append("g") contextLineEnter.append("g")
.attr("class", generateCall($$.classLines, $$)); .attr("class", classLines);
// Area // Area
contextLineEnter.append("g") contextLineEnter.append("g")
.attr("class", generateCall($$.classAreas, $$)); .attr("class", classAreas);
} }
}; };
c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, duration, durationForExit, areaIndices, barIndices, lineIndices) { c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, duration, durationForExit, areaIndices, barIndices, lineIndices) {
var $$ = this, d3 = $$.d3, context = $$.context, config = $$.config, var $$ = this, d3 = $$.d3, context = $$.context, config = $$.config,
contextLine, contextArea, contextBar, drawAreaOnSub, drawBarOnSub, drawLineOnSub; contextLine, contextArea, contextBar, drawAreaOnSub, drawBarOnSub, drawLineOnSub,
barData = $$.barData.bind($$),
lineData = $$.lineData.bind($$),
classBar = $$.classBar.bind($$),
classLine = $$.classLine.bind($$),
classArea = $$.classArea.bind($$),
initialOpacity = $$.initialOpacity.bind($$);
// subchart // subchart
if (config[__subchart_show]) { if (config[__subchart_show]) {
@ -104,13 +114,13 @@ c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, durat
drawLineOnSub = $$.generateDrawLine(lineIndices, true); drawLineOnSub = $$.generateDrawLine(lineIndices, true);
// bars // bars
contextBar = context.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar]) contextBar = context.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar])
.data(generateCall($$.barData, $$)); .data(barData);
contextBar.enter().append('path') contextBar.enter().append('path')
.attr("class", generateCall($$.classBar, $$)) .attr("class", classBar)
.style("stroke", 'none') .style("stroke", 'none')
.style("fill", $$.color); .style("fill", $$.color);
contextBar contextBar
.style("opacity", generateCall($$.initialOpacity, $$)) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr('d', drawBarOnSub) .attr('d', drawBarOnSub)
.style('opacity', 1); .style('opacity', 1);
@ -119,12 +129,12 @@ c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, durat
.remove(); .remove();
// lines // lines
contextLine = context.selectAll('.' + CLASS[_lines]).selectAll('.' + CLASS[_line]) contextLine = context.selectAll('.' + CLASS[_lines]).selectAll('.' + CLASS[_line])
.data(generateCall($$.lineData, $$)); .data(lineData);
contextLine.enter().append('path') contextLine.enter().append('path')
.attr('class', generateCall($$.classLine, $$)) .attr('class', classLine)
.style('stroke', $$.color); .style('stroke', $$.color);
contextLine contextLine
.style("opacity", generateCall($$.initialOpacity, $$)) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr("d", drawLineOnSub) .attr("d", drawLineOnSub)
.style('opacity', 1); .style('opacity', 1);
@ -133,9 +143,9 @@ c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, durat
.remove(); .remove();
// area // area
contextArea = context.selectAll('.' + CLASS[_areas]).selectAll('.' + CLASS[_area]) contextArea = context.selectAll('.' + CLASS[_areas]).selectAll('.' + CLASS[_area])
.data(generateCall($$.lineData, $$)); .data(lineData);
contextArea.enter().append('path') contextArea.enter().append('path')
.attr("class", generateCall($$.classArea, $$)) .attr("class", classArea)
.style("fill", $$.color) .style("fill", $$.color)
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }); .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
contextArea contextArea

13
src/text.js

@ -19,11 +19,13 @@ c3_chart_internal_fn.updateTargetsForText = function (targets) {
.attr('class', classTexts); .attr('class', classTexts);
}; };
c3_chart_internal_fn.redrawText = function (durationForExit) { c3_chart_internal_fn.redrawText = function (durationForExit) {
var $$ = this, config = $$.config, CLASS = $$.CLASS; var $$ = this, config = $$.config, CLASS = $$.CLASS,
barOrLineData = $$.barOrLineData.bind($$),
classText = $$.classText.bind($$);
$$.mainText = $$.main.selectAll('.' + CLASS[_texts]).selectAll('.' + CLASS[_text]) $$.mainText = $$.main.selectAll('.' + CLASS[_texts]).selectAll('.' + CLASS[_text])
.data(generateCall($$.barOrLineData, $$)); .data(barOrLineData);
$$.mainText.enter().append('text') $$.mainText.enter().append('text')
.attr("class", generateCall($$.classText, $$)) .attr("class", classText)
.attr('text-anchor', function (d) { return config[__axis_rotated] ? (d.value < 0 ? 'end' : 'start') : 'middle'; }) .attr('text-anchor', function (d) { return config[__axis_rotated] ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
.style("stroke", 'none') .style("stroke", 'none')
.style("fill", function (d) { return $$.color(d); }) .style("fill", function (d) { return $$.color(d); })
@ -36,12 +38,13 @@ c3_chart_internal_fn.redrawText = function (durationForExit) {
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yForText, forFlow) { c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yForText, forFlow) {
var $$ = this; var $$ = this,
opacityForText = forFlow ? 0 : $$.opacityForText.bind($$);
transitions.push($$.mainText.transition() transitions.push($$.mainText.transition()
.attr('x', xForText) .attr('x', xForText)
.attr('y', yForText) .attr('y', yForText)
.style("fill", $$.color) .style("fill", $$.color)
.style("fill-opacity", forFlow ? 0 : generateCall($$.opacityForText, $$))); .style("fill-opacity", opacityForText));
}; };
c3_chart_internal_fn.getTextRect = function (text, cls) { c3_chart_internal_fn.getTextRect = function (text, cls) {
var rect; var rect;

3
src/util.js

@ -43,7 +43,4 @@ var isValue = c3_chart_internal_fn.isValue = function (v) {
items = [path.pathSegList.getItem(0), path.pathSegList.getItem(1)], items = [path.pathSegList.getItem(0), path.pathSegList.getItem(1)],
minX = items[0].x, minY = Math.min(items[0].y, items[1].y); minX = items[0].x, minY = Math.min(items[0].y, items[1].y);
return {x: minX, y: minY, width: box.width, height: box.height}; return {x: minX, y: minY, width: box.width, height: box.height};
},
generateCall = c3_chart_internal_fn.generateCall = function (f, context) {
return function (d, i) { return f.call(context, d, i); };
}; };

Loading…
Cancel
Save