Multibyte chart (nvd3) x axis in off-center

Question

Using an nvd3 multibyte diagram. With minimal bars, the x-axis mark is not displayed in the center, like an axis.

Sample code to generate an x-axis label.

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

How to solve this problem?

Answer 1

This may seem strange, but try replacing the order axisLabelwith the showMaxMinfollowing:

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

Hope this helps.

Answer 2

I used the following workaround. Hope this helps:

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 .