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
Unified 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) { c3_chart_internal_fn.updateTargetsForArc = function (targets) {
var $$ = this, main = $$.main, var $$ = this, main = $$.main,
mainPieUpdate, mainPieEnter, mainPies, mainPieEnter,
classChartArc = $$.classChartArc.bind($$), classChartArc = $$.classChartArc.bind($$),
classArcs = $$.classArcs.bind($$), classArcs = $$.classArcs.bind($$),
classFocus = $$.classFocus.bind($$); classFocus = $$.classFocus.bind($$);
mainPieUpdate = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc) mainPies = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc)
.data($$.pie(targets)) .data($$.pie(targets))
.attr("class", function (d) { return classChartArc(d) + classFocus(d.data); }); .attr("class", function (d) { return classChartArc(d) + classFocus(d.data); });
mainPieEnter = mainPieUpdate.enter().append("g") mainPieEnter = mainPies.enter().append("g")
.attr("class", classChartArc); .attr("class", classChartArc);
mainPieEnter.append('g') mainPieEnter.append('g')
.attr('class', classArcs); .attr('class', classArcs);
@ -287,10 +287,10 @@ c3_chart_internal_fn.initArc = function () {
c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransform) { c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransform) {
var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main, var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main,
mainArc; arcs, mainArc;
mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc) arcs = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
.data($$.arcData.bind($$)); .data($$.arcData.bind($$));
mainArc.enter().append('path') mainArc = arcs.enter().append('path')
.attr("class", $$.classArc.bind($$)) .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.interaction_enabled && config.data_selection_isselectable(d) ? "pointer" : null; }) .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; d.startAngle = d.endAngle = config.gauge_startingAngle;
} }
this._current = d; this._current = d;
}); })
.merge(arcs);
mainArc mainArc
.attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; }) .attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
.on('mouseover', config.interaction_enabled ? function (d) { .on('mouseover', config.interaction_enabled ? function (d) {
@ -385,7 +386,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
.call($$.endall, function () { .call($$.endall, function () {
$$.transiting = false; $$.transiting = false;
}); });
mainArc.exit().transition().duration(durationForExit) arcs.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
main.selectAll('.' + CLASS.chartArc).select('text') 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; var n = 0;
transition transition
.each(function () { ++n; }) .each(function () { ++n; })
.each("end", function () { .on("end", function () {
if (!--n) { callback.apply(this, arguments); } 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 'y2': $$.height
}; };
$$.xgrid = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid) var xgrids = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
.data(xgridData); .data(xgridData);
$$.xgrid.enter().append('line').attr("class", CLASS.xgrid); $$.xgrid = xgrids.enter().append('line').attr("class", CLASS.xgrid).merge(xgrids);
if (!withoutUpdate) { if (!withoutUpdate) {
$$.xgrid.attr($$.xgridAttr) $$.xgrid.attr($$.xgridAttr)
.style("opacity", function () { return +d3.select(this).attr(config.axis_rotated ? 'y1' : 'x1') === (config.axis_rotated ? $$.height : 0) ? 0 : 1; }); .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 () { c3_chart_internal_fn.updateYGrid = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks); 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); .data(gridValues);
$$.ygrid.enter().append('line') $$.ygrid = ygrids.enter().append('line')
.attr('class', CLASS.ygrid); .attr('class', CLASS.ygrid)
.merge(ygrids);
$$.ygrid.attr("x1", config.axis_rotated ? $$.y : 0) $$.ygrid.attr("x1", config.axis_rotated ? $$.y : 0)
.attr("x2", config.axis_rotated ? $$.y : $$.width) .attr("x2", config.axis_rotated ? $$.y : $$.width)
.attr("y1", config.axis_rotated ? 0 : $$.y) .attr("y1", config.axis_rotated ? 0 : $$.y)
.attr("y2", config.axis_rotated ? $$.height : $$.y); .attr("y2", config.axis_rotated ? $$.height : $$.y);
$$.ygrid.exit().remove(); ygrids.exit().remove();
$$.smoothLines($$.ygrid, 'grid'); $$.smoothLines($$.ygrid, 'grid');
}; };
@ -87,7 +88,7 @@ c3_chart_internal_fn.yGridTextX = function (d) {
}; };
c3_chart_internal_fn.updateGrid = 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, xgridLineEnter, ygridLine, ygridLineEnter, yv;
// hide if arc type // hide if arc type
$$.grid.style('visibility', $$.hasArcType() ? 'hidden' : 'visible'); $$.grid.style('visibility', $$.hasArcType() ? 'hidden' : 'visible');
@ -96,23 +97,24 @@ c3_chart_internal_fn.updateGrid = function (duration) {
if (config.grid_x_show) { if (config.grid_x_show) {
$$.updateXGrid(); $$.updateXGrid();
} }
$$.xgridLines = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine) xgridLine = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine)
.data(config.grid_x_lines); .data(config.grid_x_lines);
// enter // enter
xgridLine = $$.xgridLines.enter().append('g') xgridLineEnter = xgridLine.enter().append('g')
.attr("class", function (d) { return CLASS.xgridLine + (d['class'] ? ' ' + d['class'] : ''); }); .attr("class", function (d) { return CLASS.xgridLine + (d['class'] ? ' ' + d['class'] : ''); });
xgridLine.append('line') xgridLineEnter.append('line')
.style("opacity", 0); .style("opacity", 0);
xgridLine.append('text') xgridLineEnter.append('text')
.attr("text-anchor", $$.gridTextAnchor) .attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.attr('dx', $$.gridTextDx) .attr('dx', $$.gridTextDx)
.attr('dy', -5) .attr('dy', -5)
.style("opacity", 0); .style("opacity", 0);
// udpate // udpate
$$.xgridLines = xgridLineEnter.merge(xgridLine);
// done in d3.transition() of the end of this function // done in d3.transition() of the end of this function
// exit // exit
$$.xgridLines.exit().transition().duration(duration) xgridLine.exit().transition().duration(duration)
.style("opacity", 0) .style("opacity", 0)
.remove(); .remove();
@ -120,20 +122,21 @@ c3_chart_internal_fn.updateGrid = function (duration) {
if (config.grid_y_show) { if (config.grid_y_show) {
$$.updateYGrid(); $$.updateYGrid();
} }
$$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine) ygridLine = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
.data(config.grid_y_lines); .data(config.grid_y_lines);
// enter // enter
ygridLine = $$.ygridLines.enter().append('g') ygridLineEnter = ygridLine.enter().append('g')
.attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); }); .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
ygridLine.append('line') ygridLineEnter.append('line')
.style("opacity", 0); .style("opacity", 0);
ygridLine.append('text') ygridLineEnter.append('text')
.attr("text-anchor", $$.gridTextAnchor) .attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "rotate(-90)" : "") .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', $$.gridTextDx) .attr('dx', $$.gridTextDx)
.attr('dy', -5) .attr('dy', -5)
.style("opacity", 0); .style("opacity", 0);
// update // update
$$.ygridLines = ygridLineEnter.merge(ygridLine);
yv = $$.yv.bind($$); yv = $$.yv.bind($$);
$$.ygridLines.select('line') $$.ygridLines.select('line')
.transition().duration(duration) .transition().duration(duration)
@ -149,7 +152,7 @@ c3_chart_internal_fn.updateGrid = function (duration) {
.text(function (d) { return d.text; }) .text(function (d) { return d.text; })
.style("opacity", 1); .style("opacity", 1);
// exit // exit
$$.ygridLines.exit().transition().duration(duration) ygridLine.exit().transition().duration(duration)
.style("opacity", 0) .style("opacity", 0)
.remove(); .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) { c3_chart_internal_fn.updateTargetsForBar = function (targets) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
mainBarUpdate, mainBarEnter, mainBars, mainBarEnter,
classChartBar = $$.classChartBar.bind($$), classChartBar = $$.classChartBar.bind($$),
classBars = $$.classBars.bind($$), classBars = $$.classBars.bind($$),
classFocus = $$.classFocus.bind($$); classFocus = $$.classFocus.bind($$);
mainBarUpdate = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar) mainBars = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
.data(targets) .data(targets)
.attr('class', function (d) { return classChartBar(d) + classFocus(d); }); .attr('class', function (d) { return classChartBar(d) + classFocus(d); });
mainBarEnter = mainBarUpdate.enter().append('g') mainBarEnter = mainBars.enter().append('g')
.attr('class', classChartBar) .attr('class', classChartBar)
.style("pointer-events", "none"); .style("pointer-events", "none");
// Bars for each data // Bars for each data
@ -31,15 +31,16 @@ c3_chart_internal_fn.updateBar = function (durationForExit) {
classBar = $$.classBar.bind($$), classBar = $$.classBar.bind($$),
initialOpacity = $$.initialOpacity.bind($$), initialOpacity = $$.initialOpacity.bind($$),
color = function (d) { return $$.color(d.id); }; 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); .data(barData);
$$.mainBar.enter().append('path') $$.mainBar = bars.enter().append('path')
.attr("class", classBar) .attr("class", classBar)
.style("stroke", color) .style("stroke", color)
.style("fill", color); .style("fill", color)
.merge(bars);
$$.mainBar $$.mainBar
.style("opacity", initialOpacity); .style("opacity", initialOpacity);
$$.mainBar.exit().transition().duration(durationForExit) bars.exit().transition().duration(durationForExit)
.remove(); .remove();
}; };
c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) { 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) { c3_chart_internal_fn.updateTargetsForLine = function (targets) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
mainLineUpdate, mainLineEnter, mainLines, mainLineEnter,
classChartLine = $$.classChartLine.bind($$), classChartLine = $$.classChartLine.bind($$),
classLines = $$.classLines.bind($$), classLines = $$.classLines.bind($$),
classAreas = $$.classAreas.bind($$), classAreas = $$.classAreas.bind($$),
classCircles = $$.classCircles.bind($$), classCircles = $$.classCircles.bind($$),
classFocus = $$.classFocus.bind($$); classFocus = $$.classFocus.bind($$);
mainLineUpdate = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine) mainLines = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
.data(targets) .data(targets)
.attr('class', function (d) { return classChartLine(d) + classFocus(d); }); .attr('class', function (d) { return classChartLine(d) + classFocus(d); });
mainLineEnter = mainLineUpdate.enter().append('g') mainLineEnter = mainLines.enter().append('g')
.attr('class', classChartLine) .attr('class', classChartLine)
.style('opacity', 0) .style('opacity', 0)
.style("pointer-events", "none"); .style("pointer-events", "none");
@ -45,17 +45,17 @@ c3_chart_internal_fn.updateTargetsForLine = function (targets) {
}; };
c3_chart_internal_fn.updateLine = function (durationForExit) { c3_chart_internal_fn.updateLine = function (durationForExit) {
var $$ = this; var $$ = this;
$$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line) var lines = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data($$.lineData.bind($$)); .data($$.lineData.bind($$));
$$.mainLine = $$.mainLine.enter().append('path') $$.mainLine = lines.enter().append('path')
.attr('class', $$.classLine.bind($$)) .attr('class', $$.classLine.bind($$))
.style("stroke", $$.color) .style("stroke", $$.color)
.merge($$.mainLine); .merge(lines);
$$.mainLine $$.mainLine
.style("opacity", $$.initialOpacity.bind($$)) .style("opacity", $$.initialOpacity.bind($$))
.style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; }) .style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
.attr('transform', null); .attr('transform', null);
$$.mainLine.exit().transition().duration(durationForExit) lines.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
}; };
@ -223,15 +223,15 @@ c3_chart_internal_fn.lineWithRegions = function (d, x, y, _regions) {
c3_chart_internal_fn.updateArea = 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) var areas = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data($$.lineData.bind($$)); .data($$.lineData.bind($$));
$$.mainArea = $$.mainArea.enter().append('path') $$.mainArea = areas.enter().append('path')
.attr("class", $$.classArea.bind($$)) .attr("class", $$.classArea.bind($$))
.style("fill", $$.color) .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 $$.mainArea
.style("opacity", $$.orgAreaOpacity); .style("opacity", $$.orgAreaOpacity);
$$.mainArea.exit().transition().duration(durationForExit) areas.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
}; };

Write Preview
Loading…
Cancel
Save