Skip to content

C
c3-closed
Commit 4ca28503 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Update left padding automatically - #295

parent a4de839c
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 45 deletions
c3.js
View file @ 4ca28503
......@@ -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;
......
c3.min.js
View file @ 4ca28503
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/samples/chart_bar_stacked.html
View file @ 4ca28503
......@@ -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>
......
htdocs/samples/padding_update.html
View file @ 4ca28503
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment