d3.js - 在 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() - 小心，因为这会返回一个轴对象，所以 I don't recommend chaining it with your other chart initialization code .

在这种情况下，我搜索了“d3 轴序数刻度”和 this example popped up .相关函数是 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);

如果您计算出最大刻度数 MAXTICKS可以放入空间，你可以这样做:

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