Skip to content

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

Calculate tick width before update scales - #295

parent 40333060
Show whitespace changes
Inline Side-by-side
Showing with 105 additions and 44 deletions
c3.js
View file @ a9f80c4b
......@@ -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 () {
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;
};
......
c3.min.js
View file @ a9f80c4b
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/samples/api_xgrid_lines.html
View file @ a9f80c4b
......@@ -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();
},
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();
}, 8000);
},
];
var i = 0;
queue.forEach(function (f) {
setTimeout(f, 1000 * i++);
});
</script>
</body>
......
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