多条形图（nvd3）x轴标签未居中

Question

使用nvd3多栏图表。当具有最小条形时，x轴标签不像y轴那样显示在中心。

生成x轴标签的示例代码。

chart = nv.models.multiBarChart().margin({
            top: 30,
            right: 28,
            bottom: 50,
            left: 60
        })
        .x(function(d) {
            return d.x
        })
        .y(function(d) {
            return d.y
        })
        .color(d3.scale.myColors().range());

chart.xAxis
        .showMaxMin(true)
        .axisLabel(xAxisLabel)
        .tickFormat(xAxisTickFormat)
        .tickValues(xaxisValues); 

如何解决这个问题？

Answer 1

这可能听起来很奇怪，但请尝试按以下方式交换axisLabel和showMaxMin的顺序：

chart.xAxis
   .axisLabel(xAxisLabel) // axisLabel first
   .showMaxMin(true)
   .tickFormat(xAxisTickFormat)
   .tickValues(xaxisValues);

希望它有所帮助。

Answer 2

我使用了下一个解决方法。希望它有所帮助：

var transitions = 0;
d3.select(this.tag + ' svg').transition().each( "start", function() {
                    transitions++;
                }).each( "end", function() {
                    if( --transitions === 0 ) {
                        alignaxisCallback();
                    }
                });



 function alignaxisCallback(){          
       var axisWidth = d3.select('.nv-x').node().getBoundingClientRect().width;
       d3.select('.nv-x').select('.nv-axislabel').attr('x', axisWidth / 2);

}

Answer 3

你试过吗

chart.xAxis.axisLabelDistance(LABEL_OFFSET);

Answer 4

通过将nvd3更新为1.8.4或更高版本来解决此问题。