需求：实现按每个x值对应值排序的D3柱状图预览（附NVD3数据）

没问题，要实现按每个年份（也就是你的x值）对应的y值排序的分组柱状图，咱们可以分两步来搞定：数据预处理 + 图表更新，具体操作如下：

首先我们需要把原始数据按年份（x值）分组，然后对每个年份下的所有月份数据按y值排序，最后重新整理成NVD3需要的格式：

// 1. 按年份分组，收集每个年份对应的所有月份数据
const groupedByYear = {};
data.forEach(monthDataset => {
  monthDataset.values.forEach(yearPoint => {
    const year = yearPoint.x;
    if (!groupedByYear[year]) {
      groupedByYear[year] = [];
    }
    groupedByYear[year].push({
      key: monthDataset.key,
      y: yearPoint.y,
      x: year
    });
  });
});

// 2. 对每个年份组内的数据按y值降序排序（要升序就改成a.y - b.y）
Object.keys(groupedByYear).forEach(year => {
  groupedByYear[year].sort((a, b) => b.y - a.y);
});

// 3. 重新构建NVD3兼容的数据结构
const sortedData = [];
// 获取所有月份的唯一标识
const allMonths = [...new Set(data.map(d => d.key))];

allMonths.forEach(month => {
  const monthValues = [];
  // 按年份从小到大遍历，保证x轴顺序正确
  Object.keys(groupedByYear).sort((a, b) => a - b).forEach(year => {
    const matchedPoint = groupedByYear[year].find(p => p.key === month);
    if (matchedPoint) {
      monthValues.push({ x: parseInt(year), y: matchedPoint.y });
    }
  });
  sortedData.push({ key: month, values: monthValues });
});

接下来把处理好的sortedData传入你的NVD3图表实例，替换原来的原始数据即可：

nv.addGraph(function() {
  const chart = nv.models.multiBarChart()
    .x(d => d.x)
    .y(d => d.y)
    .groupSpacing(0.1) // 调整分组柱子的间距
    .showControls(false); // 不需要切换堆叠/分组的话可以关掉

  // 配置x轴（年份显示为整数）
  chart.xAxis.tickFormat(d3.format('d'));
  // 配置y轴（按需求调整格式）
  chart.yAxis.tickFormat(d3.format(',.0f'));

  // 绑定排序后的数据并渲染
  d3.select('#chart svg')
    .datum(sortedData)
    .call(chart);

  // 监听窗口大小变化，自动更新图表
  nv.utils.windowResize(chart.update);
  return chart;
});

小提示 #

• 如果你需要升序排序，只需要把排序逻辑改成groupedByYear[year].sort((a, b) => a.y - b.y)即可。
• 确保年份的遍历是按从小到大的顺序，这样x轴的年份才会正常排列。

内容的提问来源于stack exchange，提问作者dhanushka