如何使用dc.js创建水平条形图？

我明白你遇到的困扰了——dc.js的条形图默认是垂直的，而且不像纯d3那样有直接切换方向的配置项，但其实只要调换x和y轴的角色，就能轻松改成水平条形图，完美解决长分类标签需要旋转的问题。下面是对应你的代码片段的具体修改步骤：

关键修改点及完整代码 #

你需要把分类维度绑定到y轴（用scaleBand），数值指标绑定到x轴（用scaleLinear），同时调整坐标轴、标签和边距：

async __createBarChart(progressBar){
 let entries = await this.entries(this.__entry, progressBar);
 let element = ReactDOM.findDOMNode(this.__container);
 var barChart = dc.barChart(element)
 .margins({top:10,left:120,right:15,bottom:30}) // 调整边距：给y轴长标签留足左侧空间，减少底部空间
 .barPadding(0.1)
 .transitionDuration(0)
 .outerPadding(0.1)
 .elasticX(true); // 让x轴（数值轴）自动适配数据范围

 let barColors = ColorFactory.createColumnColors(this.__entry.letter, entries.length);
 FamilyChart.__defineBarColors(barChart, barColors);

 barChart
 .yAxisLabel(this.__entry.label) // 原来的x轴分类标签移到y轴
 .y(d3.scaleBand()) // 分类维度用y轴的band比例尺
 .dimension(this.__dimension)
 .xAxisLabel(this.__yAxisLabel) // 原来的y轴数值标签移到x轴
 .group(this.__group)
 .x(d3.scaleLinear()); // 数值指标用x轴的线性比例尺

 barChart
 .yAxis() // 配置y轴的刻度格式（代替原来的xAxis）
 .tickFormat(id => this.__tickFormat(id, entries));

 dc.renderAll();
 return barChart;
 }

对应修改的详细说明 #

1. 交换轴的角色

   • 把原本给x轴的分类比例尺d3.scaleBand()移到y轴（.y(d3.scaleBand())）
   • 给x轴设置数值比例尺d3.scaleLinear()，配合.elasticX(true)让x轴自动根据数据调整范围
   • 交换xAxisLabel和yAxisLabel的内容，匹配新的轴用途

2. 调整坐标轴配置

   • 把原来的.xAxis().tickFormat(...)改成.yAxis().tickFormat(...)，这样长分类标签会垂直排列在y轴上，完全不需要旋转

3. 修改边距

   • 增大左侧边距（比如从50改成120），给长标签足够的显示空间；同时减少底部边距，因为x轴（数值轴）的标签不需要太多空间

4. 移除旧的CSS旋转样式
   现在标签不需要旋转了，删掉你原来的这段CSS：

.family-chart-container svg .x.axis text {
 text-anchor: end !important;
 transform: rotate(-30deg);
 }

为什么之前的尝试无效？ #

你之前只替换了.x(d3.scaleBand())为.y(d3.scaleBand())，但没有同步调整其他相关配置：比如数值轴的设置、坐标轴标签、刻度格式化的对象，以及边距，这些都是缺一不可的。dc.js的条形图是通过轴的配置来隐式决定方向的，只要分类维度在y轴、数值在x轴，就会自动渲染成水平条形图。

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