我有一个 X 轴为时间的复合图表。日期重叠主要是因为当新的月份出现时,它显示月份并且没有空间。看截图。
复合代码
var parseDate = d3.time.format("%d/%m/%Y").parse;
data.forEach(function (d) {
d.Date = parseDate(d.Date);
d.total = d.Alertness + d.Accuracy + d.Concentration + d.ErrorAwareness + d.SelfControl;
d.Year = d.Date.getFullYear();
});
var dateDim = ndx.dimension(function (d) { return d.Date; });
var minDate = dateDim.bottom(1)[0].Date;
var maxDate = dateDim.top(1)[0].Date;
composite
.width(600)
.height(400)
.x(d3.time.scale().domain([minDate, maxDate]))
.yAxisLabel("Percent %")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose([
dc.lineChart(composite)
.dimension(dateDim)
.colors('red')
.group(accuracy, "Accuracy")
.valueAccessor(function (p) {
if (p.value.count > 0) {
var totalC = p.value.total / p.value.count;
return totalC;
}
else {
return 0;
}
})])
.elasticY(true)
.brushOn(true)
.render();
我只需要一个视觉上看起来不错的干净解决方案。非常感谢
最佳答案
一种解决方案是在 x 轴上旋转刻度,请参阅 https://github.com/dc-js/dc.js/issues/731
如果你有一个条形图,你可以简单地通过 css 修复它:
#my-bar-chart .x.axis text {
text-anchor: end !important;
transform: rotate(-45deg);
}
关于javascript - dc.js x 轴与日期重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40630223/