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

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() - 请小心，因为此 returns 是一个轴对象，所以 I don't recommend chaining it with your other chart initialization code.

在这种情况下，我搜索了 "d3 axis ordinal ticks" 和 this example popped up. The relevant function is axis.tickValues()。

由于您使用 coh.map(function (d) {return d.customerRequestDate; }) 来生成 x 比例域，因此您可以像这样使用每 4 个刻度：

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);

如果您计算出可以放入 space 的最大报价 MAXTICKS 数量，您可以这样做：

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

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

Skipping overlapping labels on x-axis for a barchart in dc.js

d3.js

dc.js