Skip to content

C
c3-closed
Commit 1e6867ac authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Modularize region

parent 2fa6a3b5
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 40 deletions
c3.js
View file @ 1e6867ac
...@@ -214,9 +214,7 @@ ...@@ -214,9 +214,7 @@
.attr("dominant-baseline", "middle"); // vertical centering of text at y position in all browsers, except IE. .attr("dominant-baseline", "middle"); // vertical centering of text at y position in all browsers, except IE.
// Regions // Regions
main.append('g') $$.initRegion();
.attr("clip-path", $$.clipPath)
.attr("class", CLASS[_regions]);
// Grids // Grids
$$.initGrid(); $$.initGrid();
...@@ -453,7 +451,7 @@ ...@@ -453,7 +451,7 @@
c3_chart_internal_fn.redraw = function (options, transitions) { c3_chart_internal_fn.redraw = function (options, transitions) {
var $$ = this, main = $$.main, d3 = $$.d3, config = $$.config; var $$ = this, main = $$.main, d3 = $$.d3, config = $$.config;
var mainLine, mainArea, mainCircle, mainBar, mainRegion, mainText, eventRect, eventRectUpdate; var mainLine, mainArea, mainCircle, mainBar, mainText, eventRect, eventRectUpdate;
var areaIndices = $$.getShapeIndices($$.isAreaType), barIndices = $$.getShapeIndices($$.isBarType), lineIndices = $$.getShapeIndices($$.isLineType), maxDataCountTarget; var areaIndices = $$.getShapeIndices($$.isAreaType), barIndices = $$.getShapeIndices($$.isBarType), lineIndices = $$.getShapeIndices($$.isLineType), maxDataCountTarget;
var rectX, rectW; var rectX, rectW;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend; var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
...@@ -570,15 +568,7 @@ ...@@ -570,15 +568,7 @@
$$.redrawGrid(duration, withY); $$.redrawGrid(duration, withY);
// rect for regions // rect for regions
mainRegion = main.select('.' + CLASS[_regions]).selectAll('.' + CLASS[_region]) $$.redrawRegion(duration);
.data(config[__regions]);
mainRegion.enter().append('g')
.attr('class', generateCall($$.classRegion, $$))
.append('rect')
.style("fill-opacity", 0);
mainRegion.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
// bars // bars
mainBar = main.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar]) mainBar = main.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar])
...@@ -756,12 +746,7 @@ ...@@ -756,12 +746,7 @@
.attr('y', yForText) .attr('y', yForText)
.style("fill", $$.color) .style("fill", $$.color)
.style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$))); .style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$)));
transitions.push(mainRegion.selectAll('rect').transition() $$.addTransitionForRegion(transitions);
.attr("x", generateCall($$.regionX, $$))
.attr("y", generateCall($$.regionY, $$))
.attr("width", generateCall($$.regionWidth, $$))
.attr("height", generateCall($$.regionHeight, $$))
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }));
$$.addTransitionForGrid(transitions); $$.addTransitionForGrid(transitions);
// Wait for end of transitions if called from flow API // Wait for end of transitions if called from flow API
...@@ -784,7 +769,8 @@ ...@@ -784,7 +769,8 @@
wait = $$.generateWait(); wait = $$.generateWait();
var xgrid = $$.xgrid || d3.selectAll([]), var xgrid = $$.xgrid || d3.selectAll([]),
xgridLines = $$.xgridLines || d3.selectAll([]); xgridLines = $$.xgridLines || d3.selectAll([]),
mainRegion = $$.mainRegion || d3.selectAll([]);
// remove head data after rendered // remove head data after rendered
$$.data.targets.forEach(function (d) { $$.data.targets.forEach(function (d) {
...@@ -4571,6 +4557,33 @@ ...@@ -4571,6 +4557,33 @@
} }
}; };
c3_chart_internal_fn.initRegion = function () {
var $$ = this, CLASS = $$.CLASS;
$$.main.append('g')
.attr("clip-path", $$.clipPath)
.attr("class", CLASS[_regions]);
};
c3_chart_internal_fn.redrawRegion = function (duration) {
var $$ = this, config = $$.config, CLASS = $$.CLASS;
$$.mainRegion = $$.main.select('.' + CLASS[_regions]).selectAll('.' + CLASS[_region])
.data(config[__regions]);
$$.mainRegion.enter().append('g')
.attr('class', generateCall($$.classRegion, $$))
.append('rect')
.style("fill-opacity", 0);
$$.mainRegion.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
};
c3_chart_internal_fn.addTransitionForRegion = function (transitions) {
var $$ = this;
transitions.push($$.mainRegion.selectAll('rect').transition()
.attr("x", generateCall($$.regionX, $$))
.attr("y", generateCall($$.regionY, $$))
.attr("width", generateCall($$.regionWidth, $$))
.attr("height", generateCall($$.regionHeight, $$))
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }));
};
c3_chart_internal_fn.regionX = function (d) { c3_chart_internal_fn.regionX = function (d) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
xPos, yScale = d.axis === 'y' ? $$.y : $$.y2; xPos, yScale = d.axis === 'y' ? $$.y : $$.y2;
......
c3.min.js
View file @ 1e6867ac
This source diff could not be displayed because it is too large. You can view the blob instead.
src/core.js
View file @ 1e6867ac
...@@ -209,9 +209,7 @@ c3_chart_internal_fn.initWithData = function (data) { ...@@ -209,9 +209,7 @@ c3_chart_internal_fn.initWithData = function (data) {
.attr("dominant-baseline", "middle"); // vertical centering of text at y position in all browsers, except IE. .attr("dominant-baseline", "middle"); // vertical centering of text at y position in all browsers, except IE.
// Regions // Regions
main.append('g') $$.initRegion();
.attr("clip-path", $$.clipPath)
.attr("class", CLASS[_regions]);
// Grids // Grids
$$.initGrid(); $$.initGrid();
...@@ -448,7 +446,7 @@ c3_chart_internal_fn.updateTargets = function (targets) { ...@@ -448,7 +446,7 @@ c3_chart_internal_fn.updateTargets = function (targets) {
c3_chart_internal_fn.redraw = function (options, transitions) { c3_chart_internal_fn.redraw = function (options, transitions) {
var $$ = this, main = $$.main, d3 = $$.d3, config = $$.config; var $$ = this, main = $$.main, d3 = $$.d3, config = $$.config;
var mainLine, mainArea, mainCircle, mainBar, mainRegion, mainText, eventRect, eventRectUpdate; var mainLine, mainArea, mainCircle, mainBar, mainText, eventRect, eventRectUpdate;
var areaIndices = $$.getShapeIndices($$.isAreaType), barIndices = $$.getShapeIndices($$.isBarType), lineIndices = $$.getShapeIndices($$.isLineType), maxDataCountTarget; var areaIndices = $$.getShapeIndices($$.isAreaType), barIndices = $$.getShapeIndices($$.isBarType), lineIndices = $$.getShapeIndices($$.isLineType), maxDataCountTarget;
var rectX, rectW; var rectX, rectW;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend; var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
...@@ -565,15 +563,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) { ...@@ -565,15 +563,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
$$.redrawGrid(duration, withY); $$.redrawGrid(duration, withY);
// rect for regions // rect for regions
mainRegion = main.select('.' + CLASS[_regions]).selectAll('.' + CLASS[_region]) $$.redrawRegion(duration);
.data(config[__regions]);
mainRegion.enter().append('g')
.attr('class', generateCall($$.classRegion, $$))
.append('rect')
.style("fill-opacity", 0);
mainRegion.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
// bars // bars
mainBar = main.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar]) mainBar = main.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar])
...@@ -751,12 +741,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) { ...@@ -751,12 +741,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
.attr('y', yForText) .attr('y', yForText)
.style("fill", $$.color) .style("fill", $$.color)
.style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$))); .style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$)));
transitions.push(mainRegion.selectAll('rect').transition() $$.addTransitionForRegion(transitions);
.attr("x", generateCall($$.regionX, $$))
.attr("y", generateCall($$.regionY, $$))
.attr("width", generateCall($$.regionWidth, $$))
.attr("height", generateCall($$.regionHeight, $$))
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }));
$$.addTransitionForGrid(transitions); $$.addTransitionForGrid(transitions);
// Wait for end of transitions if called from flow API // Wait for end of transitions if called from flow API
...@@ -779,7 +764,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) { ...@@ -779,7 +764,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
wait = $$.generateWait(); wait = $$.generateWait();
var xgrid = $$.xgrid || d3.selectAll([]), var xgrid = $$.xgrid || d3.selectAll([]),
xgridLines = $$.xgridLines || d3.selectAll([]); xgridLines = $$.xgridLines || d3.selectAll([]),
mainRegion = $$.mainRegion || d3.selectAll([]);
// remove head data after rendered // remove head data after rendered
$$.data.targets.forEach(function (d) { $$.data.targets.forEach(function (d) {
......
src/region.js
View file @ 1e6867ac
c3_chart_internal_fn.initRegion = function () {
var $$ = this, CLASS = $$.CLASS;
$$.main.append('g')
.attr("clip-path", $$.clipPath)
.attr("class", CLASS[_regions]);
};
c3_chart_internal_fn.redrawRegion = function (duration) {
var $$ = this, config = $$.config, CLASS = $$.CLASS;
$$.mainRegion = $$.main.select('.' + CLASS[_regions]).selectAll('.' + CLASS[_region])
.data(config[__regions]);
$$.mainRegion.enter().append('g')
.attr('class', generateCall($$.classRegion, $$))
.append('rect')
.style("fill-opacity", 0);
$$.mainRegion.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
};
c3_chart_internal_fn.addTransitionForRegion = function (transitions) {
var $$ = this;
transitions.push($$.mainRegion.selectAll('rect').transition()
.attr("x", generateCall($$.regionX, $$))
.attr("y", generateCall($$.regionY, $$))
.attr("width", generateCall($$.regionWidth, $$))
.attr("height", generateCall($$.regionHeight, $$))
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }));
};
c3_chart_internal_fn.regionX = function (d) { c3_chart_internal_fn.regionX = function (d) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
xPos, yScale = d.axis === 'y' ? $$.y : $$.y2; xPos, yScale = d.axis === 'y' ? $$.y : $$.y2;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment