在x轴上跳过重叠标签以获取dc.js中的条形图

Question

如何动态跳过dc.js图表​​中x轴上的标签,以便它们不应与大数据集重叠.

这是我脚本的一部分

 requestDateBarChart
            .width(725)
            .height(300)
            .margins({top: 10, right: 10, bottom: 60, left: 30})
            .dimension(requestDateDimension)
            .group(requestDateGroup)
            .x(d3.scale.ordinal().domain(coh.map(function (d) {return d.customerRequestDate; })))
            .xUnits(dc.units.ordinal)
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .on('renderlet',function(chart){
                  chart.selectAll("g.x text")
                    .attr('dx', '-15')
                    .attr('transform', "rotate(-55)");
                })
            .controlsUseVisibility(true);

Answer 1

dc.js中的轴由d3.js生成,所以有一个庞大的社区来帮助这个.要访问x轴,您可以使用chart.xAxis()- 只需要小心,因为这会返回一个轴对象,因此我不建议将其与其他图表初始化代码链接.

在这种情况下,我搜索了"d3轴序数滴答",这个例子弹出.相关功能是axis.tickValues().

由于您正在使用coh.map(function (d) {return d.customerRequestDate; })x scale域,因此您可以使用每4个tick,如下所示:

var domain = coh.map(function (d) {return d.customerRequestDate; });
requestDateBarChart.x(d3.scale.ordinal().domain(domain))
var ticks = domain.filter(function(v, i) { return i % 4 === 0; });
requestDateBarChart.xAxis().tickValues(ticks);

如果您计算出MAXTICKS适合空间的最大滴答数,您可以这样做:

var stride = Math.ceil(domain.length / MAXTICKS);
var ticks = domain.filter(function(v, i) { return i % stride === 0; });