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

Modularize text

pull/486/head
Masayuki Tanaka 11 years ago
parent
1e6867acb5
commit
55c1a2af6a
4 changed files with 114 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 89
      c3.js
  2. 8
      c3.min.js
  3. 44
      src/core.js
  4. 45
      src/text.js

89
c3.js
Unescape View File

@ -241,8 +241,8 @@
if ($$.initArc) { $$.initArc(); }
if ($$.initGauge) { $$.initGauge(); }
main.select('.' + CLASS[_chart]).append("g")
.attr("class", CLASS[_chartTexts]);
// Define g for text area
if ($$.initText) { $$.initText(); }
// if zoom privileged, insert rect to forefront
// TODO: is this needed?
@ -380,21 +380,13 @@
};
c3_chart_internal_fn.updateTargets = function (targets) {
var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate, mainTextUpdate, mainTextEnter;
var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate;
var $$ = this, config = $$.config, main = $$.main;
/*-- Main --*/
//-- Text --//
mainTextUpdate = main.select('.' + CLASS[_chartTexts]).selectAll('.' + CLASS[_chartText])
.data(targets)
.attr('class', generateCall($$.classChartText, $$));
mainTextEnter = mainTextUpdate.enter().append('g')
.attr('class', generateCall($$.classChartText, $$))
.style('opacity', 0)
.style("pointer-events", "none");
mainTextEnter.append('g')
.attr('class', generateCall($$.classTexts, $$));
$$.updateTargetsForText(targets);
//-- Bar --//
mainBarUpdate = main.select('.' + CLASS[_chartBars]).selectAll('.' + CLASS[_chartBar])
@ -451,7 +443,7 @@
c3_chart_internal_fn.redraw = function (options, transitions) {
var $$ = this, main = $$.main, d3 = $$.d3, config = $$.config;
var mainLine, mainArea, mainCircle, mainBar, mainText, eventRect, eventRectUpdate;
var mainLine, mainArea, mainCircle, mainBar, eventRect, eventRectUpdate;
var areaIndices = $$.getShapeIndices($$.isAreaType), barIndices = $$.getShapeIndices($$.isBarType), lineIndices = $$.getShapeIndices($$.isLineType), maxDataCountTarget;
var rectX, rectW;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
@ -463,7 +455,7 @@
cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$),
cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
mainCircle = mainText = d3.selectAll([]);
mainCircle = d3.selectAll([]);
options = options || {};
withY = getOption(options, "withY", true);
@ -621,20 +613,7 @@
}
if ($$.hasDataLabel()) {
mainText = main.selectAll('.' + CLASS[_texts]).selectAll('.' + CLASS[_text])
.data(generateCall($$.barOrLineData, $$));
mainText.enter().append('text')
.attr("class", generateCall($$.classText, $$))
.attr('text-anchor', function (d) { return config[__axis_rotated] ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
.style("stroke", 'none')
.style("fill", function (d) { return $$.color(d); })
.style("fill-opacity", 0);
mainText
.text(function (d) { return $$.formatByAxisId($$.getAxisId(d.id))(d.value, d.id); });
mainText.exit()
.transition().duration(durationForExit)
.style('fill-opacity', 0)
.remove();
$$.redrawText(durationForExit);
}
// arc
@ -741,11 +720,7 @@
transitions.push(main.selectAll('.' + CLASS[_selectedCircle]).transition()
.attr("cx", cx)
.attr("cy", cy));
transitions.push(mainText.transition()
.attr('x', xForText)
.attr('y', yForText)
.style("fill", $$.color)
.style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$)));
$$.addTransitionForText(transitions, xForText, yForText, options.flow);
$$.addTransitionForRegion(transitions);
$$.addTransitionForGrid(transitions);
@ -770,7 +745,8 @@
var xgrid = $$.xgrid || d3.selectAll([]),
xgridLines = $$.xgridLines || d3.selectAll([]),
mainRegion = $$.mainRegion || d3.selectAll([]);
mainRegion = $$.mainRegion || d3.selectAll([]),
mainText = $$.mainText || d3.selectAll([]);
// remove head data after rendered
$$.data.targets.forEach(function (d) {
@ -3104,6 +3080,51 @@
return false;
};
c3_chart_internal_fn.initText = function () {
var $$ = this, CLASS = $$.CLASS;
$$.main.select('.' + CLASS[_chart]).append("g")
.attr("class", CLASS[_chartTexts]);
$$.mainText = $$.d3.selectAll([]);
};
c3_chart_internal_fn.updateTargetsForText = function (targets) {
var $$ = this, CLASS = $$.CLASS, mainTextUpdate, mainTextEnter,
classChartText = $$.classChartText.bind($$),
classTexts = $$.classTexts.bind($$);
mainTextUpdate = $$.main.select('.' + CLASS[_chartTexts]).selectAll('.' + CLASS[_chartText])
.data(targets)
.attr('class', classChartText);
mainTextEnter = mainTextUpdate.enter().append('g')
.attr('class', classChartText)
.style('opacity', 0)
.style("pointer-events", "none");
mainTextEnter.append('g')
.attr('class', classTexts);
};
c3_chart_internal_fn.redrawText = function (durationForExit) {
var $$ = this, config = $$.config, CLASS = $$.CLASS;
$$.mainText = $$.main.selectAll('.' + CLASS[_texts]).selectAll('.' + CLASS[_text])
.data(generateCall($$.barOrLineData, $$));
$$.mainText.enter().append('text')
.attr("class", generateCall($$.classText, $$))
.attr('text-anchor', function (d) { return config[__axis_rotated] ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
.style("stroke", 'none')
.style("fill", function (d) { return $$.color(d); })
.style("fill-opacity", 0);
$$.mainText
.text(function (d) { return $$.formatByAxisId($$.getAxisId(d.id))(d.value, d.id); });
$$.mainText.exit()
.transition().duration(durationForExit)
.style('fill-opacity', 0)
.remove();
};
c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yForText, forFlow) {
var $$ = this;
transitions.push($$.mainText.transition()
.attr('x', xForText)
.attr('y', yForText)
.style("fill", $$.color)
.style("fill-opacity", forFlow ? 0 : generateCall($$.opacityForText, $$)));
};
c3_chart_internal_fn.getTextRect = function (text, cls) {
var rect;
this.d3.select('body').selectAll('.dummy')

8
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

44
src/core.js
Unescape View File

@ -236,8 +236,8 @@ c3_chart_internal_fn.initWithData = function (data) {
if ($$.initArc) { $$.initArc(); }
if ($$.initGauge) { $$.initGauge(); }
main.select('.' + CLASS[_chart]).append("g")
.attr("class", CLASS[_chartTexts]);
// Define g for text area
if ($$.initText) { $$.initText(); }
// if zoom privileged, insert rect to forefront
// TODO: is this needed?
@ -375,21 +375,13 @@ c3_chart_internal_fn.updateSizes = function () {
};
c3_chart_internal_fn.updateTargets = function (targets) {
var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate, mainTextUpdate, mainTextEnter;
var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate;
var $$ = this, config = $$.config, main = $$.main;
/*-- Main --*/
//-- Text --//
mainTextUpdate = main.select('.' + CLASS[_chartTexts]).selectAll('.' + CLASS[_chartText])
.data(targets)
.attr('class', generateCall($$.classChartText, $$));
mainTextEnter = mainTextUpdate.enter().append('g')
.attr('class', generateCall($$.classChartText, $$))
.style('opacity', 0)
.style("pointer-events", "none");
mainTextEnter.append('g')
.attr('class', generateCall($$.classTexts, $$));
$$.updateTargetsForText(targets);
//-- Bar --//
mainBarUpdate = main.select('.' + CLASS[_chartBars]).selectAll('.' + CLASS[_chartBar])
@ -446,7 +438,7 @@ c3_chart_internal_fn.updateTargets = function (targets) {
c3_chart_internal_fn.redraw = function (options, transitions) {
var $$ = this, main = $$.main, d3 = $$.d3, config = $$.config;
var mainLine, mainArea, mainCircle, mainBar, mainText, eventRect, eventRectUpdate;
var mainLine, mainArea, mainCircle, mainBar, eventRect, eventRectUpdate;
var areaIndices = $$.getShapeIndices($$.isAreaType), barIndices = $$.getShapeIndices($$.isBarType), lineIndices = $$.getShapeIndices($$.isLineType), maxDataCountTarget;
var rectX, rectW;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
@ -458,7 +450,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$),
cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
mainCircle = mainText = d3.selectAll([]);
mainCircle = d3.selectAll([]);
options = options || {};
withY = getOption(options, "withY", true);
@ -616,20 +608,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
}
if ($$.hasDataLabel()) {
mainText = main.selectAll('.' + CLASS[_texts]).selectAll('.' + CLASS[_text])
.data(generateCall($$.barOrLineData, $$));
mainText.enter().append('text')
.attr("class", generateCall($$.classText, $$))
.attr('text-anchor', function (d) { return config[__axis_rotated] ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
.style("stroke", 'none')
.style("fill", function (d) { return $$.color(d); })
.style("fill-opacity", 0);
mainText
.text(function (d) { return $$.formatByAxisId($$.getAxisId(d.id))(d.value, d.id); });
mainText.exit()
.transition().duration(durationForExit)
.style('fill-opacity', 0)
.remove();
$$.redrawText(durationForExit);
}
// arc
@ -736,11 +715,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
transitions.push(main.selectAll('.' + CLASS[_selectedCircle]).transition()
.attr("cx", cx)
.attr("cy", cy));
transitions.push(mainText.transition()
.attr('x', xForText)
.attr('y', yForText)
.style("fill", $$.color)
.style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$)));
$$.addTransitionForText(transitions, xForText, yForText, options.flow);
$$.addTransitionForRegion(transitions);
$$.addTransitionForGrid(transitions);
@ -765,7 +740,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
var xgrid = $$.xgrid || d3.selectAll([]),
xgridLines = $$.xgridLines || d3.selectAll([]),
mainRegion = $$.mainRegion || d3.selectAll([]);
mainRegion = $$.mainRegion || d3.selectAll([]),
mainText = $$.mainText || d3.selectAll([]);
// remove head data after rendered
$$.data.targets.forEach(function (d) {

45
src/text.js
Unescape View File

@ -1,3 +1,48 @@
c3_chart_internal_fn.initText = function () {
var $$ = this, CLASS = $$.CLASS;
$$.main.select('.' + CLASS[_chart]).append("g")
.attr("class", CLASS[_chartTexts]);
$$.mainText = $$.d3.selectAll([]);
};
c3_chart_internal_fn.updateTargetsForText = function (targets) {
var $$ = this, CLASS = $$.CLASS, mainTextUpdate, mainTextEnter,
classChartText = $$.classChartText.bind($$),
classTexts = $$.classTexts.bind($$);
mainTextUpdate = $$.main.select('.' + CLASS[_chartTexts]).selectAll('.' + CLASS[_chartText])
.data(targets)
.attr('class', classChartText);
mainTextEnter = mainTextUpdate.enter().append('g')
.attr('class', classChartText)
.style('opacity', 0)
.style("pointer-events", "none");
mainTextEnter.append('g')
.attr('class', classTexts);
};
c3_chart_internal_fn.redrawText = function (durationForExit) {
var $$ = this, config = $$.config, CLASS = $$.CLASS;
$$.mainText = $$.main.selectAll('.' + CLASS[_texts]).selectAll('.' + CLASS[_text])
.data(generateCall($$.barOrLineData, $$));
$$.mainText.enter().append('text')
.attr("class", generateCall($$.classText, $$))
.attr('text-anchor', function (d) { return config[__axis_rotated] ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
.style("stroke", 'none')
.style("fill", function (d) { return $$.color(d); })
.style("fill-opacity", 0);
$$.mainText
.text(function (d) { return $$.formatByAxisId($$.getAxisId(d.id))(d.value, d.id); });
$$.mainText.exit()
.transition().duration(durationForExit)
.style('fill-opacity', 0)
.remove();
};
c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yForText, forFlow) {
var $$ = this;
transitions.push($$.mainText.transition()
.attr('x', xForText)
.attr('y', yForText)
.style("fill", $$.color)
.style("fill-opacity", forFlow ? 0 : generateCall($$.opacityForText, $$)));
};
c3_chart_internal_fn.getTextRect = function (text, cls) {
var rect;
this.d3.select('body').selectAll('.dummy')

Write Preview
Loading…
Cancel
Save