playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Skip transition when transition.duration = 0 - #172

pull/938/head
Masayuki Tanaka 10 years ago
parent
193f8f41e3
commit
6b11a1f776
9 changed files with 401 additions and 309 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 350
      c3.js
  2. 10
      c3.min.js
  3. 92
      src/core.js
  4. 32
      src/grid.js
  5. 19
      src/region.js
  6. 15
      src/shape.bar.js
  7. 54
      src/shape.line.js
  8. 120
      src/subchart.js
  9. 18
      src/text.js

350
c3.js
Unescape View File

@ -553,22 +553,22 @@
.style('opacity', targetsToShow.length ? 0 : 1); .style('opacity', targetsToShow.length ? 0 : 1);
// grid // grid
$$.redrawGrid(duration); $$.updateGrid(duration);
// rect for regions // rect for regions
$$.redrawRegion(duration); $$.updateRegion(duration);
// bars // bars
$$.redrawBar(durationForExit); $$.updateBar(durationForExit);
// lines, areas and cricles // lines, areas and cricles
$$.redrawLine(durationForExit); $$.updateLine(durationForExit);
$$.redrawArea(durationForExit); $$.updateArea(durationForExit);
$$.redrawCircle(); $$.updateCircle();
// text // text
if ($$.hasDataLabel()) { if ($$.hasDataLabel()) {
$$.redrawText(durationForExit); $$.updateText(durationForExit);
} }
// arc // arc
@ -598,40 +598,60 @@
cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$); cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$);
cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$); cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$);
// transition should be derived from one transition if (options.flow) {
d3.transition().duration(duration).each(function () { flow = $$.generateFlow({
var transitions = []; targets: targetsToShow,
flow: options.flow,
duration: duration,
drawBar: drawBar,
drawLine: drawLine,
drawArea: drawArea,
cx: cx,
cy: cy,
xv: xv,
xForText: xForText,
yForText: yForText
});
}
$$.addTransitionForBar(transitions, drawBar); if (duration) {
$$.addTransitionForLine(transitions, drawLine); // transition should be derived from one transition
$$.addTransitionForArea(transitions, drawArea); d3.transition().duration(duration).each(function () {
$$.addTransitionForCircle(transitions, cx, cy); var transitionsToWait = [];
$$.addTransitionForText(transitions, xForText, yForText, options.flow);
$$.addTransitionForRegion(transitions); // redraw and gather transitions
$$.addTransitionForGrid(transitions); [
$$.redrawBar(drawBar, true),
$$.redrawLine(drawLine, true),
$$.redrawArea(drawArea, true),
$$.redrawCircle(cx, cy, true),
$$.redrawText(xForText, yForText, options.flow, true),
$$.redrawRegion(true),
$$.redrawGrid(true),
].forEach(function (transitions) {
transitions.forEach(function (transition) {
transitionsToWait.push(transition);
});
});
// Wait for end of transitions if called from flow API // Wait for end of transitions to call flow and onrendered callback
if (options.flow) {
waitForDraw = $$.generateWait(); waitForDraw = $$.generateWait();
transitions.forEach(function (t) { transitionsToWait.forEach(function (t) {
waitForDraw.add(t); waitForDraw.add(t);
}); });
flow = $$.generateFlow({ })
targets: targetsToShow, .call(waitForDraw, function () {
flow: options.flow, if (flow) { flow(); }
duration: duration, // onrendered callback
drawBar: drawBar, });
drawLine: drawLine, }
drawArea: drawArea, else {
cx: cx, $$.redrawBar(drawBar);
cy: cy, $$.redrawLine(drawLine);
xv: xv, $$.redrawArea(drawArea);
xForText: xForText, $$.redrawCircle(cx, cy);
yForText: yForText // onrendered callback
}); }
}
})
.call(waitForDraw || function () {}, flow || function () {});
// update fadein condition // update fadein condition
$$.mapToIds($$.data.targets).forEach(function (id) { $$.mapToIds($$.data.targets).forEach(function (id) {
@ -2711,7 +2731,7 @@
// MEMO: can not keep same color... // MEMO: can not keep same color...
//mainLineUpdate.exit().remove(); //mainLineUpdate.exit().remove();
}; };
c3_chart_internal_fn.redrawLine = function (durationForExit) { c3_chart_internal_fn.updateLine = function (durationForExit) {
var $$ = this; var $$ = this;
$$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line) $$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data($$.lineData.bind($$)); .data($$.lineData.bind($$));
@ -2726,12 +2746,13 @@
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForLine = function (transitions, drawLine) { c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) {
var $$ = this; return [
transitions.push($$.mainLine.transition() (withTransition ? this.mainLine.transition() : this.mainLine)
.attr("d", drawLine) .attr("d", drawLine)
.style("stroke", $$.color) .style("stroke", this.color)
.style("opacity", 1)); .style("opacity", 1)
];
}; };
c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) { c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
@ -2871,7 +2892,7 @@
}; };
c3_chart_internal_fn.redrawArea = function (durationForExit) { c3_chart_internal_fn.updateArea = function (durationForExit) {
var $$ = this, d3 = $$.d3; var $$ = this, d3 = $$.d3;
$$.mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area) $$.mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data($$.lineData.bind($$)); .data($$.lineData.bind($$));
@ -2885,12 +2906,13 @@
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForArea = function (transitions, drawArea) { c3_chart_internal_fn.redrawArea = function (drawArea, withTransition) {
var $$ = this; return [
transitions.push($$.mainArea.transition() (withTransition ? this.mainArea.transition() : this.mainArea)
.attr("d", drawArea) .attr("d", drawArea)
.style("fill", $$.color) .style("fill", this.color)
.style("opacity", $$.orgAreaOpacity)); .style("opacity", this.orgAreaOpacity)
];
}; };
c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) { c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
var $$ = this, config = $$.config, area = $$.d3.svg.area(), var $$ = this, config = $$.config, area = $$.d3.svg.area(),
@ -2954,7 +2976,7 @@
}; };
c3_chart_internal_fn.redrawCircle = function () { c3_chart_internal_fn.updateCircle = function () {
var $$ = this; var $$ = this;
$$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle) $$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
.data($$.lineOrScatterData.bind($$)); .data($$.lineOrScatterData.bind($$));
@ -2966,16 +2988,18 @@
.style("opacity", $$.initialOpacityForCircle.bind($$)); .style("opacity", $$.initialOpacityForCircle.bind($$));
$$.mainCircle.exit().remove(); $$.mainCircle.exit().remove();
}; };
c3_chart_internal_fn.addTransitionForCircle = function (transitions, cx, cy) { c3_chart_internal_fn.redrawCircle = function (cx, cy, withTransition) {
var $$ = this; var selectedCircles = this.main.selectAll('.' + CLASS.selectedCircle);
transitions.push($$.mainCircle.transition() return [
.style('opacity', $$.opacityForCircle.bind($$)) (withTransition ? this.mainCircle.transition() : this.mainCircle)
.style("fill", $$.color) .style('opacity', this.opacityForCircle.bind(this))
.attr("cx", cx) .style("fill", this.color)
.attr("cy", cy)); .attr("cx", cx)
transitions.push($$.main.selectAll('.' + CLASS.selectedCircle).transition() .attr("cy", cy),
.attr("cx", cx) (withTransition ? selectedCircles.transition() : selectedCircles)
.attr("cy", cy)); .attr("cx", cx)
.attr("cy", cy)
];
}; };
c3_chart_internal_fn.circleX = function (d) { c3_chart_internal_fn.circleX = function (d) {
return d.x || d.x === 0 ? this.x(d.x) : null; return d.x || d.x === 0 ? this.x(d.x) : null;
@ -3060,7 +3084,7 @@
.style("cursor", function (d) { return config.data_selection_isselectable(d) ? "pointer" : null; }); .style("cursor", function (d) { return config.data_selection_isselectable(d) ? "pointer" : null; });
}; };
c3_chart_internal_fn.redrawBar = function (durationForExit) { c3_chart_internal_fn.updateBar = function (durationForExit) {
var $$ = this, var $$ = this,
barData = $$.barData.bind($$), barData = $$.barData.bind($$),
classBar = $$.classBar.bind($$), classBar = $$.classBar.bind($$),
@ -3078,12 +3102,13 @@
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForBar = function (transitions, drawBar) { c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) {
var $$ = this; return [
transitions.push($$.mainBar.transition() (withTransition ? this.mainBar.transition() : this.mainBar)
.attr('d', drawBar) .attr('d', drawBar)
.style("fill", $$.color) .style("fill", this.color)
.style("opacity", 1)); .style("opacity", 1)
];
}; };
c3_chart_internal_fn.getBarW = function (axis, barTargetsNum) { c3_chart_internal_fn.getBarW = function (axis, barTargetsNum) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
@ -3179,7 +3204,7 @@
mainTextEnter.append('g') mainTextEnter.append('g')
.attr('class', classTexts); .attr('class', classTexts);
}; };
c3_chart_internal_fn.redrawText = function (durationForExit) { c3_chart_internal_fn.updateText = function (durationForExit) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
barOrLineData = $$.barOrLineData.bind($$), barOrLineData = $$.barOrLineData.bind($$),
classText = $$.classText.bind($$); classText = $$.classText.bind($$);
@ -3198,14 +3223,14 @@
.style('fill-opacity', 0) .style('fill-opacity', 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yForText, forFlow) { c3_chart_internal_fn.redrawText = function (xForText, yForText, forFlow, withTransition) {
var $$ = this, return [
opacityForText = forFlow ? 0 : $$.opacityForText.bind($$); (withTransition ? this.mainText.transition() : this.mainText)
transitions.push($$.mainText.transition() .attr('x', xForText)
.attr('x', xForText) .attr('y', yForText)
.attr('y', yForText) .style("fill", this.color)
.style("fill", $$.color) .style("fill-opacity", forFlow ? 0 : this.opacityForText.bind(this))
.style("fill-opacity", opacityForText)); ];
}; };
c3_chart_internal_fn.getTextRect = function (text, cls) { c3_chart_internal_fn.getTextRect = function (text, cls) {
var body = this.d3.select('body').classed('c3', true), var body = this.d3.select('body').classed('c3', true),
@ -3433,7 +3458,7 @@
}; };
c3_chart_internal_fn.redrawGrid = function (duration) { c3_chart_internal_fn.updateGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config, var $$ = this, main = $$.main, config = $$.config,
xgridLine, ygridLine, yv; xgridLine, ygridLine, yv;
@ -3501,19 +3526,23 @@
.style("opacity", 0) .style("opacity", 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForGrid = function (transitions) { c3_chart_internal_fn.redrawGrid = function (withTransition) {
var $$ = this, config = $$.config, xv = $$.xv.bind($$); var $$ = this, config = $$.config, xv = $$.xv.bind($$),
transitions.push($$.xgridLines.select('line').transition() lines = $$.xgridLines.select('line'),
.attr("x1", config.axis_rotated ? 0 : xv) texts = $$.xgridLines.select('text');
.attr("x2", config.axis_rotated ? $$.width : xv) return [
.attr("y1", config.axis_rotated ? xv : $$.margin.top) (withTransition ? lines.transition() : lines)
.attr("y2", config.axis_rotated ? xv : $$.height) .attr("x1", config.axis_rotated ? 0 : xv)
.style("opacity", 1)); .attr("x2", config.axis_rotated ? $$.width : xv)
transitions.push($$.xgridLines.select('text').transition() .attr("y1", config.axis_rotated ? xv : $$.margin.top)
.attr("x", config.axis_rotated ? $$.width : 0) .attr("y2", config.axis_rotated ? xv : $$.height)
.attr("y", xv) .style("opacity", 1),
.text(function (d) { return d.text; }) (withTransition ? texts.transition() : texts)
.style("opacity", 1)); .attr("x", config.axis_rotated ? $$.width : 0)
.attr("y", xv)
.text(function (d) { return d.text; })
.style("opacity", 1)
];
}; };
c3_chart_internal_fn.showXGridFocus = function (selectedData) { c3_chart_internal_fn.showXGridFocus = function (selectedData) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
@ -4893,7 +4922,7 @@
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPath)
.attr("class", CLASS.regions); .attr("class", CLASS.regions);
}; };
c3_chart_internal_fn.redrawRegion = function (duration) { c3_chart_internal_fn.updateRegion = function (duration) {
var $$ = this, config = $$.config; var $$ = this, config = $$.config;
// hide if arc type // hide if arc type
@ -4909,18 +4938,21 @@
.style("opacity", 0) .style("opacity", 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForRegion = function (transitions) { c3_chart_internal_fn.redrawRegion = function (withTransition) {
var $$ = this, var $$ = this,
regions = $$.mainRegion.selectAll('rect'),
x = $$.regionX.bind($$), x = $$.regionX.bind($$),
y = $$.regionY.bind($$), y = $$.regionY.bind($$),
w = $$.regionWidth.bind($$), w = $$.regionWidth.bind($$),
h = $$.regionHeight.bind($$); h = $$.regionHeight.bind($$);
transitions.push($$.mainRegion.selectAll('rect').transition() return [
.attr("x", x) (withTransition ? regions.transition() : regions)
.attr("y", y) .attr("x", x)
.attr("width", w) .attr("y", y)
.attr("height", h) .attr("width", w)
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; })); .attr("height", h)
.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) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
@ -5206,15 +5238,66 @@
.attr("class", classAreas); .attr("class", classAreas);
} }
}; };
c3_chart_internal_fn.updateBarForSubchart = function (durationForExit) {
var $$ = this;
$$.contextBar = $$.context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data($$.barData.bind($$));
$$.contextBar.enter().append('path')
.attr("class", $$.classBar.bind($$))
.style("stroke", 'none')
.style("fill", $$.color);
$$.contextBar
.style("opacity", $$.initialOpacity.bind($$));
$$.contextBar.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
};
c3_chart_internal_fn.redrawBarForSubchart = function (drawBarOnSub, withTransition, duration) {
(withTransition ? this.contextBar.transition().duration(duration) : this.contextBar)
.attr('d', drawBarOnSub)
.style('opacity', 1);
};
c3_chart_internal_fn.updateLineForSubchart = function (durationForExit) {
var $$ = this;
$$.contextLine = $$.context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data($$.lineData.bind($$));
$$.contextLine.enter().append('path')
.attr('class', $$.classLine.bind($$))
.style('stroke', $$.color);
$$.contextLine
.style("opacity", $$.initialOpacity.bind($$));
$$.contextLine.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
};
c3_chart_internal_fn.redrawLineForSubchart = function (drawLineOnSub, withTransition, duration) {
(withTransition ? this.contextLine.transition().duration(duration) : this.contextLine)
.attr("d", drawLineOnSub)
.style('opacity', 1);
};
c3_chart_internal_fn.updateAreaForSubchart = function (durationForExit) {
var $$ = this, d3 = $$.d3;
$$.contextArea = $$.context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data($$.lineData.bind($$));
$$.contextArea.enter().append('path')
.attr("class", $$.classArea.bind($$))
.style("fill", $$.color)
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
$$.contextArea
.style("opacity", 0);
$$.contextArea.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
};
c3_chart_internal_fn.redrawAreaForSubchart = function (drawAreaOnSub, withTransition, duration) {
(withTransition ? this.contextArea.transition().duration(duration) : this.contextArea)
.attr("d", drawAreaOnSub)
.style("fill", this.color)
.style("opacity", this.orgAreaOpacity);
};
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, config = $$.config,
contextLine, contextArea, contextBar, drawAreaOnSub, drawBarOnSub, drawLineOnSub, 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) {
@ -5233,51 +5316,14 @@
drawAreaOnSub = $$.generateDrawArea(areaIndices, true); drawAreaOnSub = $$.generateDrawArea(areaIndices, true);
drawBarOnSub = $$.generateDrawBar(barIndices, true); drawBarOnSub = $$.generateDrawBar(barIndices, true);
drawLineOnSub = $$.generateDrawLine(lineIndices, true); drawLineOnSub = $$.generateDrawLine(lineIndices, true);
// bars
contextBar = context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar) $$.updateBarForSubchart(duration);
.data(barData); $$.updateLineForSubchart(duration);
contextBar.enter().append('path') $$.updateAreaForSubchart(duration);
.attr("class", classBar)
.style("stroke", 'none') $$.redrawBarForSubchart(drawBarOnSub, duration, duration);
.style("fill", $$.color); $$.redrawLineForSubchart(drawLineOnSub, duration, duration);
contextBar $$.redrawAreaForSubchart(drawAreaOnSub, duration, duration);
.style("opacity", initialOpacity)
.transition().duration(duration)
.attr('d', drawBarOnSub)
.style('opacity', 1);
contextBar.exit().transition().duration(duration)
.style('opacity', 0)
.remove();
// lines
contextLine = context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data(lineData);
contextLine.enter().append('path')
.attr('class', classLine)
.style('stroke', $$.color);
contextLine
.style("opacity", initialOpacity)
.transition().duration(duration)
.attr("d", drawLineOnSub)
.style('opacity', 1);
contextLine.exit().transition().duration(duration)
.style('opacity', 0)
.remove();
// area
contextArea = context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data(lineData);
contextArea.enter().append('path')
.attr("class", classArea)
.style("fill", $$.color)
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
contextArea
.style("opacity", 0)
.transition().duration(duration)
.attr("d", drawAreaOnSub)
.style("fill", $$.color)
.style("opacity", $$.orgAreaOpacity);
contextArea.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
} }
} }
}; };

10
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

92
src/core.js
Unescape View File

@ -548,22 +548,22 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
.style('opacity', targetsToShow.length ? 0 : 1); .style('opacity', targetsToShow.length ? 0 : 1);
// grid // grid
$$.redrawGrid(duration); $$.updateGrid(duration);
// rect for regions // rect for regions
$$.redrawRegion(duration); $$.updateRegion(duration);
// bars // bars
$$.redrawBar(durationForExit); $$.updateBar(durationForExit);
// lines, areas and cricles // lines, areas and cricles
$$.redrawLine(durationForExit); $$.updateLine(durationForExit);
$$.redrawArea(durationForExit); $$.updateArea(durationForExit);
$$.redrawCircle(); $$.updateCircle();
// text // text
if ($$.hasDataLabel()) { if ($$.hasDataLabel()) {
$$.redrawText(durationForExit); $$.updateText(durationForExit);
} }
// arc // arc
@ -593,40 +593,60 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$); cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$);
cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$); cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$);
// transition should be derived from one transition if (options.flow) {
d3.transition().duration(duration).each(function () { flow = $$.generateFlow({
var transitions = []; targets: targetsToShow,
flow: options.flow,
duration: duration,
drawBar: drawBar,
drawLine: drawLine,
drawArea: drawArea,
cx: cx,
cy: cy,
xv: xv,
xForText: xForText,
yForText: yForText
});
}
$$.addTransitionForBar(transitions, drawBar); if (duration) {
$$.addTransitionForLine(transitions, drawLine); // transition should be derived from one transition
$$.addTransitionForArea(transitions, drawArea); d3.transition().duration(duration).each(function () {
$$.addTransitionForCircle(transitions, cx, cy); var transitionsToWait = [];
$$.addTransitionForText(transitions, xForText, yForText, options.flow);
$$.addTransitionForRegion(transitions); // redraw and gather transitions
$$.addTransitionForGrid(transitions); [
$$.redrawBar(drawBar, true),
$$.redrawLine(drawLine, true),
$$.redrawArea(drawArea, true),
$$.redrawCircle(cx, cy, true),
$$.redrawText(xForText, yForText, options.flow, true),
$$.redrawRegion(true),
$$.redrawGrid(true),
].forEach(function (transitions) {
transitions.forEach(function (transition) {
transitionsToWait.push(transition);
});
});
// Wait for end of transitions if called from flow API // Wait for end of transitions to call flow and onrendered callback
if (options.flow) {
waitForDraw = $$.generateWait(); waitForDraw = $$.generateWait();
transitions.forEach(function (t) { transitionsToWait.forEach(function (t) {
waitForDraw.add(t); waitForDraw.add(t);
}); });
flow = $$.generateFlow({ })
targets: targetsToShow, .call(waitForDraw, function () {
flow: options.flow, if (flow) { flow(); }
duration: duration, // onrendered callback
drawBar: drawBar, });
drawLine: drawLine, }
drawArea: drawArea, else {
cx: cx, $$.redrawBar(drawBar);
cy: cy, $$.redrawLine(drawLine);
xv: xv, $$.redrawArea(drawArea);
xForText: xForText, $$.redrawCircle(cx, cy);
yForText: yForText // onrendered callback
}); }
}
})
.call(waitForDraw || function () {}, flow || function () {});
// update fadein condition // update fadein condition
$$.mapToIds($$.data.targets).forEach(function (id) { $$.mapToIds($$.data.targets).forEach(function (id) {

32
src/grid.js
Unescape View File

@ -70,7 +70,7 @@ c3_chart_internal_fn.updateYGrid = function () {
}; };
c3_chart_internal_fn.redrawGrid = function (duration) { c3_chart_internal_fn.updateGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config, var $$ = this, main = $$.main, config = $$.config,
xgridLine, ygridLine, yv; xgridLine, ygridLine, yv;
@ -138,19 +138,23 @@ c3_chart_internal_fn.redrawGrid = function (duration) {
.style("opacity", 0) .style("opacity", 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForGrid = function (transitions) { c3_chart_internal_fn.redrawGrid = function (withTransition) {
var $$ = this, config = $$.config, xv = $$.xv.bind($$); var $$ = this, config = $$.config, xv = $$.xv.bind($$),
transitions.push($$.xgridLines.select('line').transition() lines = $$.xgridLines.select('line'),
.attr("x1", config.axis_rotated ? 0 : xv) texts = $$.xgridLines.select('text');
.attr("x2", config.axis_rotated ? $$.width : xv) return [
.attr("y1", config.axis_rotated ? xv : $$.margin.top) (withTransition ? lines.transition() : lines)
.attr("y2", config.axis_rotated ? xv : $$.height) .attr("x1", config.axis_rotated ? 0 : xv)
.style("opacity", 1)); .attr("x2", config.axis_rotated ? $$.width : xv)
transitions.push($$.xgridLines.select('text').transition() .attr("y1", config.axis_rotated ? xv : $$.margin.top)
.attr("x", config.axis_rotated ? $$.width : 0) .attr("y2", config.axis_rotated ? xv : $$.height)
.attr("y", xv) .style("opacity", 1),
.text(function (d) { return d.text; }) (withTransition ? texts.transition() : texts)
.style("opacity", 1)); .attr("x", config.axis_rotated ? $$.width : 0)
.attr("y", xv)
.text(function (d) { return d.text; })
.style("opacity", 1)
];
}; };
c3_chart_internal_fn.showXGridFocus = function (selectedData) { c3_chart_internal_fn.showXGridFocus = function (selectedData) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,

19
src/region.js
Unescape View File

@ -4,7 +4,7 @@ c3_chart_internal_fn.initRegion = function () {
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPath)
.attr("class", CLASS.regions); .attr("class", CLASS.regions);
}; };
c3_chart_internal_fn.redrawRegion = function (duration) { c3_chart_internal_fn.updateRegion = function (duration) {
var $$ = this, config = $$.config; var $$ = this, config = $$.config;
// hide if arc type // hide if arc type
@ -20,18 +20,21 @@ c3_chart_internal_fn.redrawRegion = function (duration) {
.style("opacity", 0) .style("opacity", 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForRegion = function (transitions) { c3_chart_internal_fn.redrawRegion = function (withTransition) {
var $$ = this, var $$ = this,
regions = $$.mainRegion.selectAll('rect'),
x = $$.regionX.bind($$), x = $$.regionX.bind($$),
y = $$.regionY.bind($$), y = $$.regionY.bind($$),
w = $$.regionWidth.bind($$), w = $$.regionWidth.bind($$),
h = $$.regionHeight.bind($$); h = $$.regionHeight.bind($$);
transitions.push($$.mainRegion.selectAll('rect').transition() return [
.attr("x", x) (withTransition ? regions.transition() : regions)
.attr("y", y) .attr("x", x)
.attr("width", w) .attr("y", y)
.attr("height", h) .attr("width", w)
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; })); .attr("height", h)
.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) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,

15
src/shape.bar.js
Unescape View File

@ -22,7 +22,7 @@ c3_chart_internal_fn.updateTargetsForBar = function (targets) {
.style("cursor", function (d) { return config.data_selection_isselectable(d) ? "pointer" : null; }); .style("cursor", function (d) { return config.data_selection_isselectable(d) ? "pointer" : null; });
}; };
c3_chart_internal_fn.redrawBar = function (durationForExit) { c3_chart_internal_fn.updateBar = function (durationForExit) {
var $$ = this, var $$ = this,
barData = $$.barData.bind($$), barData = $$.barData.bind($$),
classBar = $$.classBar.bind($$), classBar = $$.classBar.bind($$),
@ -40,12 +40,13 @@ c3_chart_internal_fn.redrawBar = function (durationForExit) {
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForBar = function (transitions, drawBar) { c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) {
var $$ = this; return [
transitions.push($$.mainBar.transition() (withTransition ? this.mainBar.transition() : this.mainBar)
.attr('d', drawBar) .attr('d', drawBar)
.style("fill", $$.color) .style("fill", this.color)
.style("opacity", 1)); .style("opacity", 1)
];
}; };
c3_chart_internal_fn.getBarW = function (axis, barTargetsNum) { c3_chart_internal_fn.getBarW = function (axis, barTargetsNum) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,

54
src/shape.line.js
Unescape View File

@ -39,7 +39,7 @@ c3_chart_internal_fn.updateTargetsForLine = function (targets) {
// MEMO: can not keep same color... // MEMO: can not keep same color...
//mainLineUpdate.exit().remove(); //mainLineUpdate.exit().remove();
}; };
c3_chart_internal_fn.redrawLine = function (durationForExit) { c3_chart_internal_fn.updateLine = function (durationForExit) {
var $$ = this; var $$ = this;
$$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line) $$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data($$.lineData.bind($$)); .data($$.lineData.bind($$));
@ -54,12 +54,13 @@ c3_chart_internal_fn.redrawLine = function (durationForExit) {
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForLine = function (transitions, drawLine) { c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) {
var $$ = this; return [
transitions.push($$.mainLine.transition() (withTransition ? this.mainLine.transition() : this.mainLine)
.attr("d", drawLine) .attr("d", drawLine)
.style("stroke", $$.color) .style("stroke", this.color)
.style("opacity", 1)); .style("opacity", 1)
];
}; };
c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) { c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
@ -199,7 +200,7 @@ c3_chart_internal_fn.lineWithRegions = function (d, x, y, _regions) {
}; };
c3_chart_internal_fn.redrawArea = function (durationForExit) { c3_chart_internal_fn.updateArea = function (durationForExit) {
var $$ = this, d3 = $$.d3; var $$ = this, d3 = $$.d3;
$$.mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area) $$.mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data($$.lineData.bind($$)); .data($$.lineData.bind($$));
@ -213,12 +214,13 @@ c3_chart_internal_fn.redrawArea = function (durationForExit) {
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForArea = function (transitions, drawArea) { c3_chart_internal_fn.redrawArea = function (drawArea, withTransition) {
var $$ = this; return [
transitions.push($$.mainArea.transition() (withTransition ? this.mainArea.transition() : this.mainArea)
.attr("d", drawArea) .attr("d", drawArea)
.style("fill", $$.color) .style("fill", this.color)
.style("opacity", $$.orgAreaOpacity)); .style("opacity", this.orgAreaOpacity)
];
}; };
c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) { c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
var $$ = this, config = $$.config, area = $$.d3.svg.area(), var $$ = this, config = $$.config, area = $$.d3.svg.area(),
@ -282,7 +284,7 @@ c3_chart_internal_fn.generateGetAreaPoints = function (areaIndices, isSub) { //
}; };
c3_chart_internal_fn.redrawCircle = function () { c3_chart_internal_fn.updateCircle = function () {
var $$ = this; var $$ = this;
$$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle) $$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
.data($$.lineOrScatterData.bind($$)); .data($$.lineOrScatterData.bind($$));
@ -294,16 +296,18 @@ c3_chart_internal_fn.redrawCircle = function () {
.style("opacity", $$.initialOpacityForCircle.bind($$)); .style("opacity", $$.initialOpacityForCircle.bind($$));
$$.mainCircle.exit().remove(); $$.mainCircle.exit().remove();
}; };
c3_chart_internal_fn.addTransitionForCircle = function (transitions, cx, cy) { c3_chart_internal_fn.redrawCircle = function (cx, cy, withTransition) {
var $$ = this; var selectedCircles = this.main.selectAll('.' + CLASS.selectedCircle);
transitions.push($$.mainCircle.transition() return [
.style('opacity', $$.opacityForCircle.bind($$)) (withTransition ? this.mainCircle.transition() : this.mainCircle)
.style("fill", $$.color) .style('opacity', this.opacityForCircle.bind(this))
.attr("cx", cx) .style("fill", this.color)
.attr("cy", cy)); .attr("cx", cx)
transitions.push($$.main.selectAll('.' + CLASS.selectedCircle).transition() .attr("cy", cy),
.attr("cx", cx) (withTransition ? selectedCircles.transition() : selectedCircles)
.attr("cy", cy)); .attr("cx", cx)
.attr("cy", cy)
];
}; };
c3_chart_internal_fn.circleX = function (d) { c3_chart_internal_fn.circleX = function (d) {
return d.x || d.x === 0 ? this.x(d.x) : null; return d.x || d.x === 0 ? this.x(d.x) : null;

120
src/subchart.js
Unescape View File

@ -80,15 +80,66 @@ c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
.attr("class", classAreas); .attr("class", classAreas);
} }
}; };
c3_chart_internal_fn.updateBarForSubchart = function (durationForExit) {
var $$ = this;
$$.contextBar = $$.context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data($$.barData.bind($$));
$$.contextBar.enter().append('path')
.attr("class", $$.classBar.bind($$))
.style("stroke", 'none')
.style("fill", $$.color);
$$.contextBar
.style("opacity", $$.initialOpacity.bind($$));
$$.contextBar.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
};
c3_chart_internal_fn.redrawBarForSubchart = function (drawBarOnSub, withTransition, duration) {
(withTransition ? this.contextBar.transition().duration(duration) : this.contextBar)
.attr('d', drawBarOnSub)
.style('opacity', 1);
};
c3_chart_internal_fn.updateLineForSubchart = function (durationForExit) {
var $$ = this;
$$.contextLine = $$.context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data($$.lineData.bind($$));
$$.contextLine.enter().append('path')
.attr('class', $$.classLine.bind($$))
.style('stroke', $$.color);
$$.contextLine
.style("opacity", $$.initialOpacity.bind($$));
$$.contextLine.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
};
c3_chart_internal_fn.redrawLineForSubchart = function (drawLineOnSub, withTransition, duration) {
(withTransition ? this.contextLine.transition().duration(duration) : this.contextLine)
.attr("d", drawLineOnSub)
.style('opacity', 1);
};
c3_chart_internal_fn.updateAreaForSubchart = function (durationForExit) {
var $$ = this, d3 = $$.d3;
$$.contextArea = $$.context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data($$.lineData.bind($$));
$$.contextArea.enter().append('path')
.attr("class", $$.classArea.bind($$))
.style("fill", $$.color)
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
$$.contextArea
.style("opacity", 0);
$$.contextArea.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
};
c3_chart_internal_fn.redrawAreaForSubchart = function (drawAreaOnSub, withTransition, duration) {
(withTransition ? this.contextArea.transition().duration(duration) : this.contextArea)
.attr("d", drawAreaOnSub)
.style("fill", this.color)
.style("opacity", this.orgAreaOpacity);
};
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, config = $$.config,
contextLine, contextArea, contextBar, drawAreaOnSub, drawBarOnSub, drawLineOnSub, 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) {
@ -107,51 +158,14 @@ c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, durat
drawAreaOnSub = $$.generateDrawArea(areaIndices, true); drawAreaOnSub = $$.generateDrawArea(areaIndices, true);
drawBarOnSub = $$.generateDrawBar(barIndices, true); drawBarOnSub = $$.generateDrawBar(barIndices, true);
drawLineOnSub = $$.generateDrawLine(lineIndices, true); drawLineOnSub = $$.generateDrawLine(lineIndices, true);
// bars
contextBar = context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar) $$.updateBarForSubchart(duration);
.data(barData); $$.updateLineForSubchart(duration);
contextBar.enter().append('path') $$.updateAreaForSubchart(duration);
.attr("class", classBar)
.style("stroke", 'none') $$.redrawBarForSubchart(drawBarOnSub, duration, duration);
.style("fill", $$.color); $$.redrawLineForSubchart(drawLineOnSub, duration, duration);
contextBar $$.redrawAreaForSubchart(drawAreaOnSub, duration, duration);
.style("opacity", initialOpacity)
.transition().duration(duration)
.attr('d', drawBarOnSub)
.style('opacity', 1);
contextBar.exit().transition().duration(duration)
.style('opacity', 0)
.remove();
// lines
contextLine = context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data(lineData);
contextLine.enter().append('path')
.attr('class', classLine)
.style('stroke', $$.color);
contextLine
.style("opacity", initialOpacity)
.transition().duration(duration)
.attr("d", drawLineOnSub)
.style('opacity', 1);
contextLine.exit().transition().duration(duration)
.style('opacity', 0)
.remove();
// area
contextArea = context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data(lineData);
contextArea.enter().append('path')
.attr("class", classArea)
.style("fill", $$.color)
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
contextArea
.style("opacity", 0)
.transition().duration(duration)
.attr("d", drawAreaOnSub)
.style("fill", $$.color)
.style("opacity", $$.orgAreaOpacity);
contextArea.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
} }
} }
}; };

18
src/text.js
Unescape View File

@ -19,7 +19,7 @@ c3_chart_internal_fn.updateTargetsForText = function (targets) {
mainTextEnter.append('g') mainTextEnter.append('g')
.attr('class', classTexts); .attr('class', classTexts);
}; };
c3_chart_internal_fn.redrawText = function (durationForExit) { c3_chart_internal_fn.updateText = function (durationForExit) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
barOrLineData = $$.barOrLineData.bind($$), barOrLineData = $$.barOrLineData.bind($$),
classText = $$.classText.bind($$); classText = $$.classText.bind($$);
@ -38,14 +38,14 @@ c3_chart_internal_fn.redrawText = function (durationForExit) {
.style('fill-opacity', 0) .style('fill-opacity', 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yForText, forFlow) { c3_chart_internal_fn.redrawText = function (xForText, yForText, forFlow, withTransition) {
var $$ = this, return [
opacityForText = forFlow ? 0 : $$.opacityForText.bind($$); (withTransition ? this.mainText.transition() : this.mainText)
transitions.push($$.mainText.transition() .attr('x', xForText)
.attr('x', xForText) .attr('y', yForText)
.attr('y', yForText) .style("fill", this.color)
.style("fill", $$.color) .style("fill-opacity", forFlow ? 0 : this.opacityForText.bind(this))
.style("fill-opacity", opacityForText)); ];
}; };
c3_chart_internal_fn.getTextRect = function (text, cls) { c3_chart_internal_fn.getTextRect = function (text, cls) {
var body = this.d3.select('body').classed('c3', true), var body = this.d3.select('body').classed('c3', true),

Write Preview
Loading…
Cancel
Save