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

Fix resize when no data shown - #151

pull/183/head
Masayuki Tanaka 11 years ago
parent
c9ce0d5b75
commit
d482cd34da
2 changed files with 151 additions and 111 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. 256
      c3.js
  2. 6
      c3.min.js

256
c3.js
Unescape View File

@ -321,7 +321,7 @@
var margin, margin2, margin3, width, width2, height, height2, currentWidth, currentHeight; var margin, margin2, margin3, width, width2, height, height2, currentWidth, currentHeight;
var radius, radiusExpanded, innerRadius, svgArc, svgArcExpanded, svgArcExpandedSub, pie; var radius, radiusExpanded, innerRadius, svgArc, svgArcExpanded, svgArcExpandedSub, pie;
var xMin, xMax, yMin, yMax, subXMin, subXMax, subYMin, subYMax; var xMin, xMax, yMin, yMax, subXMin, subXMax, subYMin, subYMax;
var x, y, y2, subX, subY, subY2, xAxis, yAxis, yAxis2, subXAxis; var x, y, y2, subX, subY, subY2, xAxis, yAxis, y2Axis, subXAxis;
var xOrient = __axis_rotated ? "left" : "bottom", var xOrient = __axis_rotated ? "left" : "bottom",
yOrient = __axis_rotated ? (__axis_y_inner ? "top" : "bottom") : (__axis_y_inner ? "right" : "left"), yOrient = __axis_rotated ? (__axis_y_inner ? "top" : "bottom") : (__axis_y_inner ? "right" : "left"),
@ -348,27 +348,30 @@
return "url(" + document.URL.split('#')[0] + "#" + id + ")"; return "url(" + document.URL.split('#')[0] + "#" + id + ")";
} }
function transformMain(withTransition) { function transformMain(withTransition, transitions) {
var duration = withTransition !== false ? 250 : 0; var duration = withTransition !== false ? 250 : 0,
xAxis = (transitions && transitions.axisX) ? transitions.axisX : main.select('.' + CLASS.axisX).transition().duration(duration),
yAxis = (transitions && transitions.axisY) ? transitions.axisY : main.select('.' + CLASS.axisY).transition().duration(duration),
y2Axis = (transitions && transitions.axisYs) ? transitions.axisY2 : main.select('.' + CLASS.axisY2).transition().duration(duration);
main.attr("transform", translate.main); main.attr("transform", translate.main);
main.select('.' + CLASS.axisX).transition().duration(duration).attr("transform", translate.x); xAxis.attr("transform", translate.x);
main.select('.' + CLASS.axisY).transition().duration(duration).attr("transform", translate.y); yAxis.attr("transform", translate.y);
main.select('.' + CLASS.axisY2).attr("transform", translate.y2); y2Axis.attr("transform", translate.y2);
main.select('.' + CLASS.chartArcs).attr("transform", translate.arc); main.select('.' + CLASS.chartArcs).attr("transform", translate.arc);
} }
function transformContext() { function transformContext(withTransition, transitions) {
if (__subchart_show) { var duration = withTransition !== false ? 250 : 0,
context.attr("transform", translate.context); subXAxis = (transitions && transitions.axisSubX) ? transitions.axisSubX : context.select('.' + CLASS.axisX).transition().duration(duration);
context.select('.' + CLASS.axisX).attr("transform", translate.subx); context.attr("transform", translate.context);
} subXAxis.attr("transform", translate.subx);
} }
function transformLegend(withTransition) { function transformLegend(withTransition) {
var duration = withTransition !== false ? 250 : 0; var duration = withTransition !== false ? 250 : 0;
legend.transition().duration(duration).attr("transform", translate.legend); legend.transition().duration(duration).attr("transform", translate.legend);
} }
function transformAll(withTransition) { function transformAll(withTransition, transitions) {
transformMain(withTransition); transformMain(withTransition, transitions);
transformContext(withTransition); if (__subchart_show) { transformContext(withTransition, transitions); }
transformLegend(withTransition); transformLegend(withTransition);
} }
@ -593,7 +596,7 @@
xAxis = getXAxis(x, xOrient, xAxisTickFormat); xAxis = getXAxis(x, xOrient, xAxisTickFormat);
subXAxis = getXAxis(subX, subXOrient, xAxisTickFormat); subXAxis = getXAxis(subX, subXOrient, xAxisTickFormat);
yAxis = getYAxis(y, yOrient, __axis_y_tick_format, __axis_y_ticks); yAxis = getYAxis(y, yOrient, __axis_y_tick_format, __axis_y_ticks);
yAxis2 = getYAxis(y2, y2Orient, __axis_y2_tick_format, __axis_y2_ticks); y2Axis = getYAxis(y2, y2Orient, __axis_y2_tick_format, __axis_y2_ticks);
// Set initialized scales to brush and zoom // Set initialized scales to brush and zoom
if (!forInit) { if (!forInit) {
brush.scale(subX); brush.scale(subX);
@ -902,32 +905,42 @@
var c = category(i); var c = category(i);
return tickFormat ? tickFormat(c) : c; return tickFormat ? tickFormat(c) : c;
} }
function copyScale() {
var newScale = scale.copy(), domain = scale.domain();
newScale.domain([domain[0], domain[1] - 1]);
return newScale;
}
function axis(g) { function axis(g) {
g.each(function () { g.each(function () {
var g = d3.select(this); var g = d3.select(this);
var ticks = generateTicks(scale.domain()); var scale1 = copyScale(), scale0 = this.__chart__ || scale1;
var tick = g.selectAll(".tick.major").data(ticks, String), var tick = g.selectAll(".tick.major").data(generateTicks(scale1.domain()), String),
tickEnter = tick.enter().insert("g", "path").attr("class", "tick major").style("opacity", 1e-6), tickEnter = tick.enter().insert("g", "path").attr("class", "tick major").style("opacity", 1e-6),
tickExit = d3.transition(tick.exit()).style("opacity", 1e-6).remove(), tickExit = d3.transition(tick.exit()).style("opacity", 1e-6).remove(),
tickUpdate = d3.transition(tick).style("opacity", 1), tickUpdate = d3.transition(tick).style("opacity", 1),
tickTransform, tickTransform,
tickX; tickX;
var range = scale.rangeExtent ? scale.rangeExtent() : scaleExtent(scale.range()), var range = scale.rangeExtent ? scale.rangeExtent() : scaleExtent(scale.range());
path = g.selectAll(".domain").data([ 0 ]); var path = g.selectAll(".domain").data([ 0 ]), pathUpdate;
var lineEnter, lineUpdate, text, textEnter, textUpdate;
path.enter().append("path").attr("class", "domain"); path.enter().append("path").attr("class", "domain");
pathUpdate = d3.transition(path);
var pathUpdate = d3.transition(path);
var scale1 = scale.copy(), scale0 = this.__chart__ || scale1;
this.__chart__ = scale1;
tickEnter.append("line"); tickEnter.append("line");
tickEnter.append("text"); tickEnter.append("text");
var lineEnter = tickEnter.select("line"), lineUpdate = tickUpdate.select("line"), text = tick.select("text"), textEnter = tickEnter.select("text"), textUpdate = tickUpdate.select("text");
lineEnter = tickEnter.select("line");
lineUpdate = tickUpdate.select("line");
text = tick.select("text");
textEnter = tickEnter.select("text");
textUpdate = tickUpdate.select("text");
tickOffset = (scale1(1) - scale1(0)) / 2; tickOffset = (scale1(1) - scale1(0)) / 2;
tickX = tickCentered ? 0 : tickOffset; tickX = tickCentered ? 0 : tickOffset;
this.__chart__ = scale1;
switch (orient) { switch (orient) {
case "bottom": case "bottom":
{ {
@ -1572,8 +1585,11 @@
return maxTarget; return maxTarget;
} }
function getEdgeX(targets) { function getEdgeX(targets) {
var target = getMaxDataCountTarget(targets), var target = getMaxDataCountTarget(targets), firstData, lastData;
firstData = target.values[0], lastData = target.values[target.values.length - 1]; if (!target) {
return [0, 0];
}
firstData = target.values[0], lastData = target.values[target.values.length - 1];
return [firstData.x, lastData.x]; return [firstData.x, lastData.x];
} }
function mapToIds(targets) { function mapToIds(targets) {
@ -2556,9 +2572,13 @@
// Define regions // Define regions
main = svg.append("g").attr("transform", translate.main); main = svg.append("g").attr("transform", translate.main);
context = __subchart_show ? svg.append("g").attr("transform", translate.context) : null; context = svg.append("g").attr("transform", translate.context);
legend = svg.append("g").attr("transform", translate.legend); legend = svg.append("g").attr("transform", translate.legend);
if (!__subchart_show) {
context.style('visibility', 'hidden');
}
if (!__legend_show) { if (!__legend_show) {
legend.style('visibility', 'hidden'); legend.style('visibility', 'hidden');
hiddenLegendIds = mapToIds(c3.data.targets); hiddenLegendIds = mapToIds(c3.data.targets);
@ -2694,35 +2714,34 @@
/*-- Context Region --*/ /*-- Context Region --*/
if (__subchart_show) { // Define g for chart area
// Define g for chart area context.append('g')
context.append('g') .attr("clip-path", clipPath)
.attr("clip-path", clipPath) .attr('class', CLASS.chart)
.attr('class', CLASS.chart); .attr("display", "none");
// Define g for bar chart area // Define g for bar chart area
context.select('.' + CLASS.chart).append("g") context.select('.' + CLASS.chart).append("g")
.attr("class", CLASS.chartBars); .attr("class", CLASS.chartBars);
// Define g for line chart area // Define g for line chart area
context.select('.' + CLASS.chart).append("g") context.select('.' + CLASS.chart).append("g")
.attr("class", CLASS.chartLines); .attr("class", CLASS.chartLines);
// Add extent rect for Brush // Add extent rect for Brush
context.append("g") context.append("g")
.attr("clip-path", clipPath) .attr("clip-path", clipPath)
.attr("class", CLASS.brush) .attr("class", CLASS.brush)
.call(brush) .call(brush)
.selectAll("rect") .selectAll("rect")
.attr(__axis_rotated ? "width" : "height", __axis_rotated ? width2 : height2); .attr(__axis_rotated ? "width" : "height", __axis_rotated ? width2 : height2);
// ATTENTION: This must be called AFTER chart added // ATTENTION: This must be called AFTER chart added
// Add Axis // Add Axis
context.append("g") context.append("g")
.attr("class", CLASS.axisX) .attr("class", CLASS.axisX)
.attr("transform", translate.subx) .attr("transform", translate.subx)
.attr("clip-path", __axis_rotated ? "" : clipPathForXAxis); .attr("clip-path", __axis_rotated ? "" : clipPathForXAxis);
}
// Set targets // Set targets
updateTargets(c3.data.targets); updateTargets(c3.data.targets);
@ -2732,14 +2751,14 @@
main.select('.' + CLASS.axisX).style("opacity", 0).call(xAxis); main.select('.' + CLASS.axisX).style("opacity", 0).call(xAxis);
} else { } else {
main.select('.' + CLASS.axisY).style("opacity", 0).call(yAxis); main.select('.' + CLASS.axisY).style("opacity", 0).call(yAxis);
main.select('.' + CLASS.axisY2).style("opacity", 0).call(yAxis2); main.select('.' + CLASS.axisY2).style("opacity", 0).call(y2Axis);
} }
// Update sizes according to tick width updated by above // Update sizes according to tick width updated by above
updateSizes(); updateSizes();
updateScales(); updateScales();
updateSvgSize(); updateSvgSize();
transformAll(); transformAll(false);
// Draw with targets // Draw with targets
redraw({withTransform: true, withUpdateXDomain: true, withUpdateOrgXDomain: true, withTransitionForAxis: false}); redraw({withTransform: true, withUpdateXDomain: true, withUpdateOrgXDomain: true, withTransitionForAxis: false});
@ -3072,21 +3091,16 @@
} }
function redraw(options) { function redraw(options) {
var xaxis, subxaxis, yaxis, xgrid, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine; var xaxis, subxaxis, yaxis, y2axis, xgrid, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine;
var mainCircle, mainBar, mainRegion, mainText, contextBar, eventRect, eventRectUpdate; var mainCircle, mainBar, mainRegion, mainText, contextBar, eventRect, eventRectUpdate;
var barIndices = getBarIndices(), maxDataCountTarget; var barIndices = getBarIndices(), maxDataCountTarget;
var rectX, rectW; var rectX, rectW;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransitionForHorizontalAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend; var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransitionForHorizontalAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
var hideAxis = hasArcType(c3.data.targets); var hideAxis = hasArcType(c3.data.targets);
var drawBar, drawBarOnSub, xForText, yForText; var drawBar, drawBarOnSub, xForText, yForText;
var duration, durationForExit, durationForAxis; var transitions, duration, durationForExit, durationForAxis;
var targetsToShow = filterTargetsToShow(c3.data.targets), tickValues, i, intervalForCulling; var targetsToShow = filterTargetsToShow(c3.data.targets), tickValues, i, intervalForCulling;
// abort if no targets to show
if (targetsToShow.length === 0) {
return;
}
options = isDefined(options) ? options : {}; options = isDefined(options) ? options : {};
withY = isDefined(options.withY) ? options.withY : true; withY = isDefined(options.withY) ? options.withY : true;
withSubchart = isDefined(options.withSubchart) ? options.withSubchart : true; withSubchart = isDefined(options.withSubchart) ? options.withSubchart : true;
@ -3104,24 +3118,43 @@
durationForExit = withTransitionForExit ? duration : 0; durationForExit = withTransitionForExit ? duration : 0;
durationForAxis = withTransitionForAxis ? duration : 0; durationForAxis = withTransitionForAxis ? duration : 0;
xaxis = main.select('.' + CLASS.axisX);
yaxis = main.select('.' + CLASS.axisY);
y2axis = main.select('.' + CLASS.axisY2);
subxaxis = context.select('.' + CLASS.axisX);
transitions = {
axisX: xaxis.transition().duration(durationForAxis),
axisY: yaxis.transition().duration(durationForAxis),
axisY2: y2axis.transition().duration(durationForAxis),
axisSubX: subxaxis.transition().duration(durationForAxis),
};
// update legend and transform each g // update legend and transform each g
if (withLegend && __legend_show) { if (withLegend && __legend_show) {
updateLegend(mapToIds(c3.data.targets), options); updateLegend(mapToIds(c3.data.targets), options, transitions);
} }
if (withUpdateOrgXDomain) { if (targetsToShow.length) {
x.domain(d3.extent(getXDomain(targetsToShow))); if (withUpdateOrgXDomain) {
orgXDomain = x.domain(); x.domain(d3.extent(getXDomain(targetsToShow)));
if (__zoom_enabled) { zoom.scale(x).updateScaleExtent(); } orgXDomain = x.domain();
subX.domain(x.domain()); if (__zoom_enabled) { zoom.scale(x).updateScaleExtent(); }
brush.scale(subX); subX.domain(x.domain());
brush.scale(subX);
}
// ATTENTION: call here to update tickOffset
if (withUpdateXDomain) {
x.domain(brush.empty() ? orgXDomain : brush.extent());
if (__zoom_enabled) { zoom.scale(x).updateScaleExtent(); }
}
} else {
// ticks increase without this when no data shown
if (isCategorized) {
x.domain([0, xaxis.selectAll('.tick').size()]);
}
} }
// ATTENTION: call here to update tickOffset
if (withUpdateXDomain) {
x.domain(brush.empty() ? orgXDomain : brush.extent());
if (__zoom_enabled) { zoom.scale(x).updateScaleExtent(); }
}
y.domain(getYDomain(targetsToShow, 'y')); y.domain(getYDomain(targetsToShow, 'y'));
y2.domain(getYDomain(targetsToShow, 'y2')); y2.domain(getYDomain(targetsToShow, 'y2'));
@ -3133,19 +3166,32 @@
} }
// x axis // x axis
xaxis = main.select('.' + CLASS.axisX).style("opacity", hideAxis ? 0 : 1); xaxis.style("opacity", hideAxis ? 0 : 1);
if (__axis_rotated || withTransitionForHorizontalAxis) { if (__axis_rotated || withTransitionForHorizontalAxis) {
xaxis = xaxis.transition().duration(durationForAxis); xaxis = transitions.axisX;
} }
xaxis.call(xAxis); xaxis.call(xAxis);
// y axis // y axis
yaxis = main.select('.' + CLASS.axisY).style("opacity", hideAxis ? 0 : 1); yaxis.style("opacity", hideAxis ? 0 : 1);
if (!__axis_rotated || withTransitionForHorizontalAxis) { if (!__axis_rotated || withTransitionForHorizontalAxis) {
yaxis = yaxis.transition().duration(durationForAxis); yaxis = transitions.axisY;
} }
yaxis.call(yAxis); yaxis.call(yAxis);
// y2 axis // y2 axis
main.select('.' + CLASS.axisY2).style("opacity", hideAxis ? 0 : 1).transition().duration(durationForAxis).call(yAxis2); y2axis.style("opacity", hideAxis ? 0 : 1);
if (!__axis_rotated || withTransitionForHorizontalAxis) {
y2axis = transitions.axisY2;
}
y2axis.call(y2Axis);
// sub x axis
subxaxis.style("opacity", hideAxis ? 0 : 1);
if (__axis_rotated || withTransitionForHorizontalAxis) {
subxaxis = transitions.axisSubX;
}
subxaxis.call(subXAxis);
// show/hide if manual culling needed // show/hide if manual culling needed
if (withUpdateXDomain) { if (withUpdateXDomain) {
@ -3294,6 +3340,23 @@
.remove(); .remove();
} }
// rect for regions
mainRegion = main.select('.' + CLASS.regions).selectAll('rect.' + CLASS.region)
.data(__regions);
mainRegion.enter().append('rect')
.style("fill-opacity", 0);
mainRegion
.attr('class', classRegion)
.attr("x", regionX)
.attr("y", regionY)
.attr("width", regionWidth)
.attr("height", regionHeight)
.transition().duration(duration)
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; });
mainRegion.exit().transition().duration(duration)
.style("fill-opacity", 0)
.remove();
// bars // bars
mainBar = main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar) mainBar = main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data(barData); .data(barData);
@ -3397,12 +3460,6 @@
} }
// update subchart elements if needed // update subchart elements if needed
if (withSubchart) { if (withSubchart) {
// axes
subxaxis = context.select('.' + CLASS.axisX).style("opacity", hideAxis ? 0 : 1);
if (__axis_rotated || withTransitionForHorizontalAxis) {
subxaxis = subxaxis.transition().duration(durationForAxis);
}
subxaxis.call(subXAxis);
// rotate tick text if needed // rotate tick text if needed
if (!__axis_rotated && __axis_x_tick_rotate) { if (!__axis_rotated && __axis_x_tick_rotate) {
@ -3512,23 +3569,6 @@
eventRectUpdate.exit().remove(); eventRectUpdate.exit().remove();
} }
// rect for regions
mainRegion = main.select('.' + CLASS.regions).selectAll('rect.' + CLASS.region)
.data(__regions);
mainRegion.enter().append('rect')
.style("fill-opacity", 0);
mainRegion
.attr('class', classRegion)
.attr("x", regionX)
.attr("y", regionY)
.attr("width", regionWidth)
.attr("height", regionHeight)
.transition().duration(duration)
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; });
mainRegion.exit().transition().duration(duration)
.style("fill-opacity", 0)
.remove();
// update fadein condition // update fadein condition
mapToIds(c3.data.targets).forEach(function (id) { mapToIds(c3.data.targets).forEach(function (id) {
withoutFadeIn[id] = true; withoutFadeIn[id] = true;
@ -3877,7 +3917,7 @@
updateLegend(mapToIds(c3.data.targets)); updateLegend(mapToIds(c3.data.targets));
} }
function updateLegend(targetIds, options) { function updateLegend(targetIds, options, transitions) {
var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect; var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect;
var paddingTop = 4, paddingRight = 26, maxWidth = 0, maxHeight = 0, posMin = 10; var paddingTop = 4, paddingRight = 26, maxWidth = 0, maxHeight = 0, posMin = 10;
var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0; var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0;
@ -4034,7 +4074,7 @@
updateSvgSize(); updateSvgSize();
// Update g positions // Update g positions
if (withTransformAll) { if (withTransformAll) {
transformAll(withTransitionForTransform); transformAll(withTransitionForTransform, transitions);
} }
} }
@ -4054,7 +4094,7 @@
function transformTo(targetIds, type, optionsForRedraw) { function transformTo(targetIds, type, optionsForRedraw) {
var withTransitionForAxis = !hasArcType(c3.data.targets); var withTransitionForAxis = !hasArcType(c3.data.targets);
setTargetType(targetIds, type); setTargetType(targetIds, type);
updateAndRedraw(optionsForRedraw ? optionsForRedraw : {withTransitionForAxis: withTransitionForAxis}); updateAndRedraw(optionsForRedraw || {withTransitionForAxis: withTransitionForAxis});
} }
c3.focus = function (targetId) { c3.focus = function (targetId) {

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save