我想根据条形图上显示的条形数调整条形图的宽度。这是我的图表,它显示了适合宽度的足够记录并且显示得很好。
这是另一种情况,其中只有两个条形以相同的宽度显示,看起来很奇怪。
对于这种情况,我需要根据条形数调整图表的宽度,这样我的图表看起来会很漂亮。
这是我脚本的一部分
var width = ??; // Here how should I calculate width based on the number of bars?
redrawCustomerCodeBarChart
.width(width)
.height(400)
.margins({top: 10, right: 10, bottom: 70, left: 30})
.dimension(customerNamer)
.group(customerNameGroupr)
.x(d3.scale.ordinal().domain(newCoh.map(function (d) {return d.customerName; })))
.xUnits(dc.units.ordinal)
.elasticY(true)
.renderHorizontalGridLines(true)
.on('renderlet',function(chart){
chart.selectAll("g.x text")
.attr('dx', '-15')
.attr('transform', "rotate(-55)");
})
.on('filtered.monitor', function(d) {
// return d.key + ' (' + d.value + ')';
if(d.value !== undefined)
size= d.value;
})
.controlsUseVisibility(true);
答案 0 :(得分:2)
在大多数dc.js图表中,数据是从group.all()
读取的。因此,条数就是
customerNameGroupr.all().length
然后适当地相乘。
如果过滤内容时条形图的数量可能会发生变化(例如,使用remove_empty_bins
),那么您需要在每次重绘之前设置宽度:
chart.on('preRedraw', function(chart) {
chart.width(chart.group().all().length * BAR_WIDTH);
});
但这可能会很混乱。