nvd3.js multiBarHorizontalChart无X轴刻度，如何配置显示对应刻度

你使用的是nvd3横向多柱状图，横向布局下展示数值的轴对应配置中的yAxis，0~44.6区间无刻度是因为没有显式指定数值轴的范围和刻度生成规则，按如下方式修改配置即可：

具体修改点 #

• 给图表实例添加yDomain配置，强制数值轴的范围覆盖0到略大于最大值的区间（比如45，刚好覆盖你最大的44.55数值）
• 给yAxis添加ticks配置，显式指定刻度数量，还可搭配tickFormat规范刻度的小数显示位数

修改后的核心代码 #

nv.addGraph(function () {
  var chart = nv.models
    .multiBarHorizontalChart()
    .x(function (d) {
      return d.label;
    })
    .y(function (d) {
      return d.value;
    })
    .duration(1300)
    .margin({ bottom: 100, left: 100 })
    .groupSpacing(0.1)
    .yDomain([0, 45]); // 新增：强制y轴范围从0到45，覆盖你的数据范围

  chart.xAxis
    .axisLabel("wool")
    .axisLabelDistance(-5);

  chart.yAxis.axisLabel("breaks average")
    .axisLabelDistance(5)
    .showMaxMin(true)
    .ticks(10) // 新增：指定生成10个刻度，可根据需求调整数量
    .tickFormat(d3.format('.1f')); // 可选配置：刻度保留1位小数，不需要可以直接删除

  d3.select(selector).datum(Data).call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

如果需要适配动态数据，不想写死最大值，可以先计算数据中的最大数值再设置yDomain：

// 先计算所有数据的最大值
let maxValue = 0;
Data.forEach(group => {
  group.values.forEach(item => {
    if (item.value > maxValue) maxValue = item.value;
  })
})
// 设置yDomain的时候留5%的余量避免最大值贴边
.yDomain([0, maxValue * 1.05])

内容的提问来源于stack exchange，提问作者Stéphane Laurent