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

Update left padding automatically - #295

pull/333/head
Masayuki Tanaka 11 years ago
parent
a4de839ca9
commit
4ca28503a1
4 changed files with 139 additions and 48 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. 66
      c3.js
  2. 6
      c3.min.js
  3. 68
      htdocs/samples/chart_bar_stacked.html
  4. 47
      htdocs/samples/padding_update.html

66
c3.js
Unescape View File

@ -411,7 +411,7 @@
y2Axis = main.select('.' + CLASS.axisY2);
if (withTransition) { y2Axis = y2Axis.transition(); }
}
main.attr("transform", translate.main);
(withTransition ? main.transition() : main).attr("transform", translate.main);
xAxis.attr("transform", translate.x);
yAxis.attr("transform", translate.y);
y2Axis.attr("transform", translate.y2);
@ -706,7 +706,7 @@
return (forTimeseries ? d3.time.scale() : d3.scale.linear()).range([min, max]);
}
function getX(min, max, domain, offset) {
var scale = getScale(min, max, isTimeSeries),//(isTimeSeries ? d3.time.scale() : d3.scale.linear()).range([min, max]),
var scale = getScale(min, max, isTimeSeries),
_scale = domain ? scale.domain(domain) : scale, key;
// Define customized scale if categorized axis
if (isCategorized) {
@ -2789,6 +2789,20 @@
// for save value
var orgAreaOpacity, withoutFadeIn = {};
function updateDimension() {
if (__axis_rotated) {
axes.x.call(xAxis);
axes.subx.call(subXAxis);
} else {
axes.y.call(yAxis);
axes.y2.call(y2Axis);
}
updateSizes();
updateScales();
updateSvgSize();
transformAll(false);
}
function observeInserted(selection) {
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
@ -2799,8 +2813,8 @@
// parentNode will NOT be null when completed
if (selection.node().parentNode) {
window.clearInterval(interval);
updateDimension();
redraw({
withUpdateTranslate: true,
withTransform: true,
withUpdateXDomain: true,
withUpdateOrgXDomain: true,
@ -3085,7 +3099,13 @@
// Draw with targets
if (binding) {
redraw({withUpdateTranslate: true, withTransform: true, withUpdateXDomain: true, withUpdateOrgXDomain: true, withTransitionForAxis: false});
updateDimension();
redraw({
withTransform: true,
withUpdateXDomain: true,
withUpdateOrgXDomain: true,
withTransitionForAxis: false,
});
}
// Show tooltip if needed
@ -3463,7 +3483,7 @@
var mainLine, mainArea, mainCircle, mainBar, mainArc, mainRegion, mainText, contextLine, contextArea, contextBar, eventRect, eventRectUpdate;
var areaIndices = getShapeIndices(isAreaType), barIndices = getShapeIndices(isBarType), lineIndices = getShapeIndices(isLineType), maxDataCountTarget, tickOffset;
var rectX, rectW;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend, withUpdateTranslate;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
var hideAxis = hasArcType(c3.data.targets);
var drawArea, drawAreaOnSub, drawBar, drawBarOnSub, drawLine, drawLineOnSub, xForText, yForText;
var duration, durationForExit, durationForAxis, waitForDraw = generateWait();
@ -3478,7 +3498,6 @@
withTransform = getOption(options, "withTransform", false);
withUpdateXDomain = getOption(options, "withUpdateXDomain", false);
withUpdateOrgXDomain = getOption(options, "withUpdateOrgXDomain", false);
withUpdateTranslate = getOption(options, "withUpdateTranslate", false);
withLegend = getOption(options, "withLegend", false);
withTransitionForExit = getOption(options, "withTransitionForExit", withTransition);
withTransitionForAxis = getOption(options, "withTransitionForAxis", withTransition);
@ -3489,21 +3508,6 @@
transitions = transitions || generateAxisTransitions(durationForAxis);
// MEMO: call axis to generate ticks and get those length, then update translate with them
if (withUpdateTranslate) {
if (__axis_rotated) {
axes.x.call(xAxis);
axes.subx.call(subXAxis);
} else {
axes.y.call(yAxis);
axes.y2.call(y2Axis);
}
updateSizes();
updateScales();
updateSvgSize();
transformAll(false);
}
// update legend and transform each g
if (withLegend && __legend_show) {
updateLegend(mapToIds(c3.data.targets), options, transitions);
@ -3540,6 +3544,21 @@
transitions.axisY2.call(y2Axis);
transitions.axisSubX.call(subXAxis);
if (targetsToShow.length) {
// Update dimensions according to the width of ticks, etc
updateSizes();
updateScales();
updateSvgSize();
transformAll(true, transitions);
// x changes above, so need to update domain too
updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain);
// Update axis again because the length can be updated because of update of max tick width and generate tickOffset
transitions.axisX.call(xAxis);
transitions.axisSubX.call(subXAxis);
transitions.axisY.call(yAxis);
transitions.axisY2.call(y2Axis);
}
// Update axis label
updateAxisLabels(withTransition);
@ -5059,7 +5078,7 @@
c3.groups = function (groups) {
if (isUndefined(groups)) { return __data_groups; }
__data_groups = groups;
redraw();
redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true});
return __data_groups;
};
@ -5344,7 +5363,8 @@
var ticks = tickValues ? tickValues : generateTicks(scale1),
tick = g.selectAll(".tick").data(ticks, scale1),
tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6),
tickExit = d3.transition(tick.exit()).style("opacity", 1e-6).remove(),
// MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks.
tickExit = tick.exit().remove(),
tickUpdate = d3.transition(tick).style("opacity", 1),
tickTransform, tickX;

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

68
htdocs/samples/chart_bar_stacked.html
Unescape View File

@ -8,7 +8,11 @@
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
var axis_x_type = 'category',
axis_rotated = false;
var generate = function () { return c3.generate({
data: {
columns: [
['data1', 30, 200, 200, 400, 150, -250],
@ -22,39 +26,65 @@
},
axis: {
x: {
type: 'categorized'
type: axis_x_type
},
// rotated: true
rotated: axis_rotated
},
grid: {
y: {
lines: [{value:0}]
}
},
zoom: {
// enabled: true
},
subchart: {
// show: true
},
tooltip: {
// enabled: false
}
});
}); }, chart = generate();
setTimeout(function () {
function update1() {
chart.groups([['data1', 'data2', 'data3']])
}, 500);
}
setTimeout(function () {
function update2() {
chart.load({
columns: [['data4', 100, 50, 150, -200, 300, -100]]
});
}, 1000);
}
setTimeout(function () {
function update3() {
chart.groups([['data1', 'data2', 'data3', 'data4']])
}, 1500);
}
setTimeout(update1, 1000);
setTimeout(update2, 2000);
setTimeout(update3, 3000);
setTimeout(function () {
axis_rotated = true;
chart = generate();
}, 4000);
setTimeout(update1, 5000);
setTimeout(update2, 6000);
setTimeout(update3, 7000);
setTimeout(function () {
axis_x_type = '';
axis_rotated = false;
chart = generate();
}, 8000);
setTimeout(update1, 9000);
setTimeout(update2, 10000);
setTimeout(update3, 11000);
setTimeout(function () {
axis_x_type = '';
axis_rotated = true;
chart = generate();
}, 12000);
setTimeout(update1, 13000);
setTimeout(update2, 14000);
setTimeout(update3, 15000);
</script>
</body>

47
htdocs/samples/padding_update.html
Unescape View File

@ -9,7 +9,9 @@
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
var axis_rotated = true;
var generate = function () { return c3.generate({
data: {
x: 'x',
columns: [
@ -30,9 +32,9 @@
x: {
type: 'categorized'
},
rotated: true
rotated: axis_rotated
},
});
}); }, chart = generate();
setTimeout(function () {
chart.hide();
@ -42,6 +44,45 @@
chart.show();
}, 2000);
setTimeout(function () {
chart.load({
columns: [
['data1', 300, 350, 100]
],
categories: ['2014-01-01 10:10:10', '2014-02-01 12:30:00', '2014-03-01 16:30:00']
});
}, 3000);
setTimeout(function () {
chart.load({
columns: [
['data1', 50, 100, 150]
],
categories: ['2014', '2015', '2016']
});
}, 4000);
setTimeout(function () {
axis_rotated = false;
chart = generate();
}, 5000);
setTimeout(function () {
chart.load({
columns: [
['data1', 300, 350, 100000]
],
});
}, 6000);
setTimeout(function () {
chart.load({
columns: [
['data1', 50, 100, 150]
],
});
}, 7000);
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save