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

Calculate tick width before update scales - #295

pull/340/head
Masayuki Tanaka 11 years ago
parent
4033306090
commit
a9f80c4bb0
3 changed files with 111 additions and 50 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. 40
      c3.js
  2. 6
      c3.min.js
  3. 115
      htdocs/samples/api_xgrid_lines.html

40
c3.js
Unescape View File

@ -975,12 +975,25 @@
return textAnchorForAxisLabel(__axis_rotated, getY2AxisLabelPosition());
}
function getMaxTickWidth(id) {
var maxWidth = 0, axisClass = id === 'x' ? CLASS.axisX : id === 'y' ? CLASS.axisY : CLASS.axisY2;
var maxWidth = 0, targetsToShow, scale, axis;
if (svg) {
svg.selectAll('.' + axisClass + ' .tick text').each(function () {
var box = this.getBoundingClientRect();
if (maxWidth < box.width) { maxWidth = box.width; }
});
targetsToShow = filterTargetsToShow(c3.data.targets);
if (id === 'y') {
scale = y.copy().domain(getYDomain(targetsToShow, 'y'));
axis = getYAxis(scale, yOrient, __axis_y_tick_format, __axis_y_ticks);
} else if (id === 'y2') {
scale = y2.copy().domain(getYDomain(targetsToShow, 'y2'));
axis = getYAxis(scale, y2Orient, __axis_y2_tick_format, __axis_y2_ticks);
} else {
scale = x.copy().domain(getXDomain(targetsToShow));
axis = getXAxis(scale, xOrient, getXAxisTickFormat(), __axis_x_tick_values ? __axis_x_tick_values : xAxis.tickValues());
}
main.append("g").call(axis).each(function () {
d3.select(this).selectAll('text').each(function () {
var box = this.getBoundingClientRect();
if (maxWidth < box.width) { maxWidth = box.width; }
});
}).remove();
}
currentMaxTickWidth = maxWidth <= 0 ? currentMaxTickWidth : maxWidth;
return currentMaxTickWidth;
@ -3571,21 +3584,6 @@
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);
@ -5116,7 +5114,7 @@
c3.groups = function (groups) {
if (isUndefined(groups)) { return __data_groups; }
__data_groups = groups;
redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true});
redraw();
return __data_groups;
};

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

115
htdocs/samples/api_xgrid_lines.html
Unescape View File

@ -8,7 +8,10 @@
<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_rotated = false, axis_x_type = "";
var generate = function () { return c3.generate({
bindto: '#chart',
data: {
columns: [
@ -16,46 +19,106 @@
]
},
axis: {
// rotated: true,
rotated: axis_rotated,
x: {
type: axis_x_type
}
},
grid: {
x: {
// lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
}
}
});
}); }, chart = generate();
setTimeout(function () {
var queue = [
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 1000);
setTimeout(function () {
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
}, 2000);
setTimeout(function () {
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
}, 3000);
setTimeout(function () {
},
function () {
chart.xgrids.remove({value:2});
}, 4000);
setTimeout(function () {
},
function () {
chart.xgrids.remove({class:'hoge'});
}, 5000);
setTimeout(function () {
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
}, 6000);
setTimeout(function () {
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 7000);
setTimeout(function () {
},
function () {
chart.xgrids.remove();
},
function () {
axis_rotated = true;
chart = generate();
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
},
function () {
chart.xgrids.remove({value:2});
},
function () {
chart.xgrids.remove({class:'hoge'});
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids.remove();
}, 8000);
},
function () {
axis_rotated = false;
axis_x_type = 'category';
chart = generate();
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
},
function () {
chart.xgrids.remove({value:2});
},
function () {
chart.xgrids.remove({class:'hoge'});
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids.remove();
},
];
var i = 0;
queue.forEach(function (f) {
setTimeout(f, 1000 * i++);
});
</script>
</body>

Write Preview
Loading…
Cancel
Save