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
Unified 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); y2Axis = main.select('.' + CLASS.axisY2);
if (withTransition) { y2Axis = y2Axis.transition(); } if (withTransition) { y2Axis = y2Axis.transition(); }
} }
main.attr("transform", translate.main); (withTransition ? main.transition() : main).attr("transform", translate.main);
xAxis.attr("transform", translate.x); xAxis.attr("transform", translate.x);
yAxis.attr("transform", translate.y); yAxis.attr("transform", translate.y);
y2Axis.attr("transform", translate.y2); y2Axis.attr("transform", translate.y2);
@ -706,7 +706,7 @@
return (forTimeseries ? d3.time.scale() : d3.scale.linear()).range([min, max]); return (forTimeseries ? d3.time.scale() : d3.scale.linear()).range([min, max]);
} }
function getX(min, max, domain, offset) { 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; _scale = domain ? scale.domain(domain) : scale, key;
// Define customized scale if categorized axis // Define customized scale if categorized axis
if (isCategorized) { if (isCategorized) {
@ -2789,6 +2789,20 @@
// for save value // for save value
var orgAreaOpacity, withoutFadeIn = {}; 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) { function observeInserted(selection) {
var observer = new MutationObserver(function (mutations) { var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
@ -2799,8 +2813,8 @@
// parentNode will NOT be null when completed // parentNode will NOT be null when completed
if (selection.node().parentNode) { if (selection.node().parentNode) {
window.clearInterval(interval); window.clearInterval(interval);
updateDimension();
redraw({ redraw({
withUpdateTranslate: true,
withTransform: true, withTransform: true,
withUpdateXDomain: true, withUpdateXDomain: true,
withUpdateOrgXDomain: true, withUpdateOrgXDomain: true,
@ -3085,7 +3099,13 @@
// Draw with targets // Draw with targets
if (binding) { 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 // Show tooltip if needed
@ -3463,7 +3483,7 @@
var mainLine, mainArea, mainCircle, mainBar, mainArc, mainRegion, mainText, contextLine, contextArea, contextBar, eventRect, eventRectUpdate; 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 areaIndices = getShapeIndices(isAreaType), barIndices = getShapeIndices(isBarType), lineIndices = getShapeIndices(isLineType), maxDataCountTarget, tickOffset;
var rectX, rectW; 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 hideAxis = hasArcType(c3.data.targets);
var drawArea, drawAreaOnSub, drawBar, drawBarOnSub, drawLine, drawLineOnSub, xForText, yForText; var drawArea, drawAreaOnSub, drawBar, drawBarOnSub, drawLine, drawLineOnSub, xForText, yForText;
var duration, durationForExit, durationForAxis, waitForDraw = generateWait(); var duration, durationForExit, durationForAxis, waitForDraw = generateWait();
@ -3478,7 +3498,6 @@
withTransform = getOption(options, "withTransform", false); withTransform = getOption(options, "withTransform", false);
withUpdateXDomain = getOption(options, "withUpdateXDomain", false); withUpdateXDomain = getOption(options, "withUpdateXDomain", false);
withUpdateOrgXDomain = getOption(options, "withUpdateOrgXDomain", false); withUpdateOrgXDomain = getOption(options, "withUpdateOrgXDomain", false);
withUpdateTranslate = getOption(options, "withUpdateTranslate", false);
withLegend = getOption(options, "withLegend", false); withLegend = getOption(options, "withLegend", false);
withTransitionForExit = getOption(options, "withTransitionForExit", withTransition); withTransitionForExit = getOption(options, "withTransitionForExit", withTransition);
withTransitionForAxis = getOption(options, "withTransitionForAxis", withTransition); withTransitionForAxis = getOption(options, "withTransitionForAxis", withTransition);
@ -3489,21 +3508,6 @@
transitions = transitions || generateAxisTransitions(durationForAxis); 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 // update legend and transform each g
if (withLegend && __legend_show) { if (withLegend && __legend_show) {
updateLegend(mapToIds(c3.data.targets), options, transitions); updateLegend(mapToIds(c3.data.targets), options, transitions);
@ -3540,6 +3544,21 @@
transitions.axisY2.call(y2Axis); transitions.axisY2.call(y2Axis);
transitions.axisSubX.call(subXAxis); 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 // Update axis label
updateAxisLabels(withTransition); updateAxisLabels(withTransition);
@ -5059,7 +5078,7 @@
c3.groups = function (groups) { c3.groups = function (groups) {
if (isUndefined(groups)) { return __data_groups; } if (isUndefined(groups)) { return __data_groups; }
__data_groups = groups; __data_groups = groups;
redraw(); redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true});
return __data_groups; return __data_groups;
}; };
@ -5344,7 +5363,8 @@
var ticks = tickValues ? tickValues : generateTicks(scale1), var ticks = tickValues ? tickValues : generateTicks(scale1),
tick = g.selectAll(".tick").data(ticks, scale1), tick = g.selectAll(".tick").data(ticks, scale1),
tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6), 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), tickUpdate = d3.transition(tick).style("opacity", 1),
tickTransform, tickX; 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="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({
var axis_x_type = 'category',
axis_rotated = false;
var generate = function () { return c3.generate({
data: { data: {
columns: [ columns: [
['data1', 30, 200, 200, 400, 150, -250], ['data1', 30, 200, 200, 400, 150, -250],
@ -22,39 +26,65 @@
}, },
axis: { axis: {
x: { x: {
type: 'categorized' type: axis_x_type
}, },
// rotated: true rotated: axis_rotated
}, },
grid: { grid: {
y: { y: {
lines: [{value:0}] lines: [{value:0}]
} }
}, },
zoom: { }); }, chart = generate();
// enabled: true
},
subchart: {
// show: true
},
tooltip: {
// enabled: false
}
});
setTimeout(function () { function update1() {
chart.groups([['data1', 'data2', 'data3']]) chart.groups([['data1', 'data2', 'data3']])
}, 500); }
setTimeout(function () { function update2() {
chart.load({ chart.load({
columns: [['data4', 100, 50, 150, -200, 300, -100]] columns: [['data4', 100, 50, 150, -200, 300, -100]]
}); });
}, 1000); }
setTimeout(function () { function update3() {
chart.groups([['data1', 'data2', 'data3', 'data4']]) 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> </script>
</body> </body>

47
htdocs/samples/padding_update.html
Unescape View File

@ -9,7 +9,9 @@
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var axis_rotated = true;
var generate = function () { return c3.generate({
data: { data: {
x: 'x', x: 'x',
columns: [ columns: [
@ -30,9 +32,9 @@
x: { x: {
type: 'categorized' type: 'categorized'
}, },
rotated: true rotated: axis_rotated
}, },
}); }); }, chart = generate();
setTimeout(function () { setTimeout(function () {
chart.hide(); chart.hide();
@ -42,6 +44,45 @@
chart.show(); chart.show();
}, 2000); }, 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> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save