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

Fix arc and grid

pull/2246/head
Masayuki Tanaka 7 years ago
parent
b4e9f4a745
commit
4a5bfd0771
5 changed files with 50 additions and 45 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. 17
      src/arc.js
  2. 2
      src/core.js
  3. 39
      src/grid.js
  4. 15
      src/shape.bar.js
  5. 22
      src/shape.line.js

17
src/arc.js
Unescape View File

@ -254,14 +254,14 @@ c3_chart_internal_fn.getArcTitle = function () {
c3_chart_internal_fn.updateTargetsForArc = function (targets) {
var $$ = this, main = $$.main,
mainPieUpdate, mainPieEnter,
mainPies, mainPieEnter,
classChartArc = $$.classChartArc.bind($$),
classArcs = $$.classArcs.bind($$),
classFocus = $$.classFocus.bind($$);
mainPieUpdate = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc)
mainPies = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc)
.data($$.pie(targets))
.attr("class", function (d) { return classChartArc(d) + classFocus(d.data); });
mainPieEnter = mainPieUpdate.enter().append("g")
mainPieEnter = mainPies.enter().append("g")
.attr("class", classChartArc);
mainPieEnter.append('g')
.attr('class', classArcs);
@ -287,10 +287,10 @@ c3_chart_internal_fn.initArc = function () {
c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransform) {
var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main,
mainArc;
mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
arcs, mainArc;
arcs = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
.data($$.arcData.bind($$));
mainArc.enter().append('path')
mainArc = arcs.enter().append('path')
.attr("class", $$.classArc.bind($$))
.style("fill", function (d) { return $$.color(d.data); })
.style("cursor", function (d) { return config.interaction_enabled && config.data_selection_isselectable(d) ? "pointer" : null; })
@ -299,7 +299,8 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
d.startAngle = d.endAngle = config.gauge_startingAngle;
}
this._current = d;
});
})
.merge(arcs);
mainArc
.attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
.on('mouseover', config.interaction_enabled ? function (d) {
@ -385,7 +386,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
.call($$.endall, function () {
$$.transiting = false;
});
mainArc.exit().transition().duration(durationForExit)
arcs.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
main.selectAll('.' + CLASS.chartArc).select('text')

2
src/core.js
Unescape View File

@ -999,7 +999,7 @@ c3_chart_internal_fn.endall = function (transition, callback) {
var n = 0;
transition
.each(function () { ++n; })
.each("end", function () {
.on("end", function () {
if (!--n) { callback.apply(this, arguments); }
});
};

39
src/grid.js
Unescape View File

@ -48,28 +48,29 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
'y2': $$.height
};
$$.xgrid = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
var xgrids = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
.data(xgridData);
$$.xgrid.enter().append('line').attr("class", CLASS.xgrid);
$$.xgrid = xgrids.enter().append('line').attr("class", CLASS.xgrid).merge(xgrids);
if (!withoutUpdate) {
$$.xgrid.attr($$.xgridAttr)
.style("opacity", function () { return +d3.select(this).attr(config.axis_rotated ? 'y1' : 'x1') === (config.axis_rotated ? $$.height : 0) ? 0 : 1; });
}
$$.xgrid.exit().remove();
xgrids.exit().remove();
};
c3_chart_internal_fn.updateYGrid = function () {
var $$ = this, config = $$.config,
gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks);
$$.ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
var ygrids = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
.data(gridValues);
$$.ygrid.enter().append('line')
.attr('class', CLASS.ygrid);
$$.ygrid = ygrids.enter().append('line')
.attr('class', CLASS.ygrid)
.merge(ygrids);
$$.ygrid.attr("x1", config.axis_rotated ? $$.y : 0)
.attr("x2", config.axis_rotated ? $$.y : $$.width)
.attr("y1", config.axis_rotated ? 0 : $$.y)
.attr("y2", config.axis_rotated ? $$.height : $$.y);
$$.ygrid.exit().remove();
ygrids.exit().remove();
$$.smoothLines($$.ygrid, 'grid');
};
@ -87,7 +88,7 @@ c3_chart_internal_fn.yGridTextX = function (d) {
};
c3_chart_internal_fn.updateGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config,
xgridLine, ygridLine, yv;
xgridLine, xgridLineEnter, ygridLine, ygridLineEnter, yv;
// hide if arc type
$$.grid.style('visibility', $$.hasArcType() ? 'hidden' : 'visible');
@ -96,23 +97,24 @@ c3_chart_internal_fn.updateGrid = function (duration) {
if (config.grid_x_show) {
$$.updateXGrid();
}
$$.xgridLines = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine)
xgridLine = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine)
.data(config.grid_x_lines);
// enter
xgridLine = $$.xgridLines.enter().append('g')
xgridLineEnter = xgridLine.enter().append('g')
.attr("class", function (d) { return CLASS.xgridLine + (d['class'] ? ' ' + d['class'] : ''); });
xgridLine.append('line')
xgridLineEnter.append('line')
.style("opacity", 0);
xgridLine.append('text')
xgridLineEnter.append('text')
.attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.attr('dx', $$.gridTextDx)
.attr('dy', -5)
.style("opacity", 0);
// udpate
$$.xgridLines = xgridLineEnter.merge(xgridLine);
// done in d3.transition() of the end of this function
// exit
$$.xgridLines.exit().transition().duration(duration)
xgridLine.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
@ -120,20 +122,21 @@ c3_chart_internal_fn.updateGrid = function (duration) {
if (config.grid_y_show) {
$$.updateYGrid();
}
$$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
ygridLine = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
.data(config.grid_y_lines);
// enter
ygridLine = $$.ygridLines.enter().append('g')
ygridLineEnter = ygridLine.enter().append('g')
.attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
ygridLine.append('line')
ygridLineEnter.append('line')
.style("opacity", 0);
ygridLine.append('text')
ygridLineEnter.append('text')
.attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', $$.gridTextDx)
.attr('dy', -5)
.style("opacity", 0);
// update
$$.ygridLines = ygridLineEnter.merge(ygridLine);
yv = $$.yv.bind($$);
$$.ygridLines.select('line')
.transition().duration(duration)
@ -149,7 +152,7 @@ c3_chart_internal_fn.updateGrid = function (duration) {
.text(function (d) { return d.text; })
.style("opacity", 1);
// exit
$$.ygridLines.exit().transition().duration(duration)
ygridLine.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
};

15
src/shape.bar.js
Unescape View File

@ -9,14 +9,14 @@ c3_chart_internal_fn.initBar = function () {
};
c3_chart_internal_fn.updateTargetsForBar = function (targets) {
var $$ = this, config = $$.config,
mainBarUpdate, mainBarEnter,
mainBars, mainBarEnter,
classChartBar = $$.classChartBar.bind($$),
classBars = $$.classBars.bind($$),
classFocus = $$.classFocus.bind($$);
mainBarUpdate = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
mainBars = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
.data(targets)
.attr('class', function (d) { return classChartBar(d) + classFocus(d); });
mainBarEnter = mainBarUpdate.enter().append('g')
mainBarEnter = mainBars.enter().append('g')
.attr('class', classChartBar)
.style("pointer-events", "none");
// Bars for each data
@ -31,15 +31,16 @@ c3_chart_internal_fn.updateBar = function (durationForExit) {
classBar = $$.classBar.bind($$),
initialOpacity = $$.initialOpacity.bind($$),
color = function (d) { return $$.color(d.id); };
$$.mainBar = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
var bars = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data(barData);
$$.mainBar.enter().append('path')
$$.mainBar = bars.enter().append('path')
.attr("class", classBar)
.style("stroke", color)
.style("fill", color);
.style("fill", color)
.merge(bars);
$$.mainBar
.style("opacity", initialOpacity);
$$.mainBar.exit().transition().duration(durationForExit)
bars.exit().transition().duration(durationForExit)
.remove();
};
c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) {

22
src/shape.line.js
Unescape View File

@ -9,16 +9,16 @@ c3_chart_internal_fn.initLine = function () {
};
c3_chart_internal_fn.updateTargetsForLine = function (targets) {
var $$ = this, config = $$.config,
mainLineUpdate, mainLineEnter,
mainLines, mainLineEnter,
classChartLine = $$.classChartLine.bind($$),
classLines = $$.classLines.bind($$),
classAreas = $$.classAreas.bind($$),
classCircles = $$.classCircles.bind($$),
classFocus = $$.classFocus.bind($$);
mainLineUpdate = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
mainLines = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
.data(targets)
.attr('class', function (d) { return classChartLine(d) + classFocus(d); });
mainLineEnter = mainLineUpdate.enter().append('g')
mainLineEnter = mainLines.enter().append('g')
.attr('class', classChartLine)
.style('opacity', 0)
.style("pointer-events", "none");
@ -45,17 +45,17 @@ c3_chart_internal_fn.updateTargetsForLine = function (targets) {
};
c3_chart_internal_fn.updateLine = function (durationForExit) {
var $$ = this;
$$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
var lines = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data($$.lineData.bind($$));
$$.mainLine = $$.mainLine.enter().append('path')
$$.mainLine = lines.enter().append('path')
.attr('class', $$.classLine.bind($$))
.style("stroke", $$.color)
.merge($$.mainLine);
.merge(lines);
$$.mainLine
.style("opacity", $$.initialOpacity.bind($$))
.style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
.attr('transform', null);
$$.mainLine.exit().transition().duration(durationForExit)
lines.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
};
@ -223,15 +223,15 @@ c3_chart_internal_fn.lineWithRegions = function (d, x, y, _regions) {
c3_chart_internal_fn.updateArea = function (durationForExit) {
var $$ = this, d3 = $$.d3;
$$.mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
var areas = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data($$.lineData.bind($$));
$$.mainArea = $$.mainArea.enter().append('path')
$$.mainArea = areas.enter().append('path')
.attr("class", $$.classArea.bind($$))
.style("fill", $$.color)
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }).merge($$.mainArea);
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }).merge(areas);
$$.mainArea
.style("opacity", $$.orgAreaOpacity);
$$.mainArea.exit().transition().duration(durationForExit)
areas.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
};

Write Preview
Loading…
Cancel
Save