d3.js - 多条形图(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);

希望能帮助到你。