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

【问题标题】：Multibar chart(nvd3) x axis label in not centered多条形图（nvd3）x轴标签未居中
【发布时间】：2014-12-31 09:57:46
【问题描述】：

使用 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);

如何解决这个问题？

【问题讨论】：

你能把你的代码放在小提琴里，这样别人可以仔细看看。

标签： d3.js nvd3.js

【解决方案1】：

这可能听起来很奇怪，但请尝试交换 axisLabel 和 showMaxMin 的顺序，如下所示：

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

希望对你有帮助。

【讨论】：

您的解决方案没有帮助。
@OnkarJanwa 你能把你的代码放在fiddle 里，这样有人可以仔细看看。

【解决方案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);

}

【讨论】：

【解决方案3】：

你试过了吗

chart.xAxis.axisLabelDistance(LABEL_OFFSET);

【讨论】：

【解决方案4】：

通过将 nvd3 更新到 1.8.4 或更高版本解决了该问题。

【讨论】：