dc.js柱状图如何旋转x轴标签65度解决标签重叠问题

要实现x轴标签旋转65度不重叠，只需要做两处核心调整：

• 加大图表底部边距，避免旋转后的标签被画布裁剪
• 监听图表的renderlet事件（每次图表渲染/重绘完成后触发），选中x轴标签元素设置旋转角度和对齐规则

具体修改步骤 #

1. 调整margins配置的bottom值，原配置25px的底部空间完全不足以容纳旋转后的长标签，修改为120px即可预留足够展示空间：

.margins({ top: 30, right: 50, bottom: 120, left: 40 })

2. 在柱状图的链式调用末尾添加renderlet事件处理，对x轴标签做旋转设置：

.on('renderlet', function(chart) {
    // 选中x轴下的所有文本标签
    chart.selectAll('g.axis.x text')
        .style('text-anchor', 'end') // 文本末尾对齐刻度锚点，避免错位
        .attr('dx', '-0.8em') // 水平偏移微调位置
        .attr('dy', '0.15em') // 垂直偏移微调位置
        .attr('transform', 'rotate(-65)') // 逆时针旋转65度
})

修改后完整的图表配置代码 #

let xAxis = data.key;
let newData: any = [];

for (let i = 0; i < xAxis.length; i++) {
    newData.push({
        'name': xAxis[i],
        'count': data.values[i]
    })
}

let ndx = crossfilter(newData);

let nameDimension = ndx.dimension(function (d: any) {
    return d.name;
});

let countDimension: any = ndx.dimension(function (d: any) {
    return +d.count;
});

let countGroup = nameDimension.group().reduceSum(function (p: any) {
    return +p.count;
});

barChart
    .width(525)
    .height(450)
    .transitionDuration(1000) // 动画时长
    .margins({ top: 30, right: 50, bottom: 120, left: 40 }) // 加大底部边距容纳旋转标签
    .dimension(nameDimension)
    .group(countGroup)
    .x(d3.scaleOrdinal().domain(xAxis))
    .xUnits(dc.units.ordinal)
    .y(d3.scaleLinear().domain([0, countDimension.top(1)[0].count * 1.1])) // Y轴上限比最大值高10%
    .elasticY(false)
    .renderHorizontalGridLines(true)
    .colorAccessor(function (d: any, i: any) {
        return d3.schemePaired[i];
    })
    .ordinalColors(d3.schemePaired)
    .renderLabel(true)
    .label(function (p: any) {
        return p.y;
    })
    // 渲染完成后旋转x轴标签
    .on('renderlet', function(chart) {
        chart.selectAll('g.axis.x text')
            .style('text-anchor', 'end')
            .attr('dx', '-0.8em')
            .attr('dy', '0.15em')
            .attr('transform', 'rotate(-65)')
    });

dc.renderAll(group);

如果旋转后标签位置有细微偏差，可以微调dx、dy的数值适配实际标签长度，直到展示效果和参考示例一致即可。

内容的提问来源于stack exchange，提问作者fairlyMinty