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

我设法在dc.js中创建了一些条形图：

我的序数轴记号标签可能变得很长。因此，我想展示水平条而不是垂直条。这样，长刻度标签（如“Price_Fuel”、“Conditional”等）就不再需要倾斜

下面是我想要的d3示例：

我试着替换像这样的电话

barChart.x(d3.scaleBand())

与

但这没有帮助

此外，条形图似乎没有提供方向属性，如

barChart.direction('horizontal')

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

一些代码片段：

async __createBarChart(progressBar){

    let entries = await this.entries(this.__entry, progressBar);

    let element = ReactDOM.findDOMNode(this.__container);

    var barChart = dc.barChart(element)
        .xUnits(dc.units.ordinal)
        .margins({top:10,left:50,right:15,bottom:60})
        .barPadding(0.1)
        .transitionDuration(0)
        .outerPadding(0.1);

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

    barChart
        //.xAxisLabel(this.__entry.label)
        .x(d3.scaleBand())
        .dimension(this.__dimension)
        .yAxisLabel(this.__yAxisLabel)
        .group(this.__group);

    barChart
        .xAxis()
        .tickFormat(id => this.__tickFormat(id, entries));

     dc.renderAll();

     return barChart;
}

一些CSS：

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

---

它是一个单独的图表，几乎没有共同的代码，在特性上有许多细微的差异，称为。很多人都尝试过合并这些类，但都失败了，特别是它不支持堆叠。它是一个单独的图表，几乎没有共同的代码，在特性上有许多细微的差异，称为。许多人尝试合并类，但失败了，特别是它不支持堆叠。

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