使用dc.js,我制作了一个带有数值的序数条形图。我选择了序数图,因为我想为“未知”添加一个x-tick。
问题在于y轴。我无法弄清楚轴标记/缩放。如图所示,它在[00,20,40,60,80]之间交替。我希望它有一个完整的范围。我试图手动插入y刻度,但似乎并不是y轴的存取方法。下面是我的代码和捕获。
ghg2Chart /* dc.barChart('#volume-month-chart', 'chartGroup') */
.width(FULL_CHART_WIDTH)
.height(FULL_CHART_HEIGHT)
.margins({top: 10, right: 20, bottom: 40, left: 20})
.dimension(GHG2)
.group(GHG2Group)
.elasticY(true)
.centerBar(true)
.gap(5)
.round(dc.round.floor)
.alwaysUseRounding(true)
.x(d3.scale.ordinal().domain(GHG2bins))
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
//Customize the filter displayed in the control span
.filterPrinter(function (filters) {
var filter = filters[0], s = '';
s += numberFormat(filter[0]) + ' -> ' + numberFormat(filter[1]);
return s;
})
.filterHandler(function (dimension, filter) {
var selectedRange = ghg2Chart.filter();
dimension.filter(function (d) {
var range;
var match = false;
// Iterate over each selected range and return if 'd' is within the range.
for (var i = 0; i < filter.length; i++) {
range = filter[i];
if (d >= range - .1 && d <= range) {
match = true;
break;
}
}
return selectedRange != null ? match : true;
});
return filter;
});
答案 0 :(得分:1)
图表的唯一问题是没有足够的空间用于刻度线,因此标签会被剪裁。
默认左边距为30像素:
https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.marginMixin+margins
尝试增加保证金。懒惰的方式是:
chart.margins().left = 40;
但这有点令人困惑,所以更常见的方式是
chart.margins({top: 10, right: 50, bottom: 30, left: 40});
dc.js自动执行此操作非常棒:
https://github.com/dc-js/dc.js/issues/713
但是基于文本大小进行布局是相当困难的,所以现在所有这些东西仍然是手动的(影响图例,轴标签等)。