When the label size is too short, the constant for calculating (#1120)

margin_size does not apply. Also nvd3 auto-adjust font-size of axis
labels.
Temporary solution here: Setting a fixed font-size on nvd3 axis labels
and a minimum threshold for label size.
This commit is contained in:
vera-liu 2016-09-15 16:48:35 -07:00 committed by GitHub
parent e895807158
commit 2132f6715e
2 changed files with 13 additions and 6 deletions

View File

@ -18,6 +18,11 @@ text.nv-axislabel {
.dist_bar svg.nvd3-svg {
width: auto;
font-size: 14px;
}
.nv-x text{
font-size: 12px;
}
.bar .slice_container {

View File

@ -69,14 +69,16 @@ function nvd3Vis(slice) {
// Calculates the longest label size for stretching bottom margin
function calculateStretchMargins(payloadData) {
const axisLabels = payloadData.data[0].values;
let stretchMargin = 0;
const pixelsPerCharX = 4.5; // approx, depends on font size
let maxLabelSize = 0;
for (let i = 0; i < axisLabels.length; i++) {
maxLabelSize = Math.max(axisLabels[i].x.length, maxLabelSize);
}
stretchMargin = Math.ceil(Math.max(stretchMargin, pixelsPerCharX * maxLabelSize));
let maxLabelSize = 10; // accomodate for shorter labels
payloadData.data.forEach((d) => {
const axisLabels = d.values;
for (let i = 0; i < axisLabels.length; i++) {
maxLabelSize = Math.max(axisLabels[i].x.length, maxLabelSize);
}
});
stretchMargin = Math.ceil(pixelsPerCharX * maxLabelSize);
return stretchMargin;
}