如何在NVD3/d3.js中实现最大值与平均值系列柱状图重叠显示

首先直接给结论：NVD3本身并没有提供直接配置这种“同位置双柱均从Y轴底部起始”的柱状图选项，它的multiBarChart只支持分组（grouped）和堆叠（stacked）两种模式——分组会把两个柱子横向分开，堆叠则会让上层柱子从下层顶部开始，都不符合你的需求。不过别担心，我们可以通过访问底层的D3对象来手动修改DOM元素，实现你想要的效果。

实现思路 #

核心思路是先利用NVD3生成分组柱状图的基础结构（因为分组模式下每个数据点的柱子是独立的），然后通过D3选择器调整平均值柱子的位置和尺寸，让它和对应日期的最大值柱子重叠，同时保持两者都从Y轴底部起始。这样既保留了NVD3自带的坐标轴、tooltip、响应式等功能，又实现了自定义的叠加效果。

具体代码示例 #

下面是一个完整的实现示例，你可以直接参考修改：

// 1. 定义你的数据结构，最大值和平均值系列
var dailyData = [
  {
    key: "最大值",
    values: [
      {x: "1日", y: 18}, {x: "2日", y: 22}, {x: "3日", y: 15},
      {x: "4日", y: 25}, {x: "5日", y: 20}, {x: "6日", y: 19}
    ]
  },
  {
    key: "平均值",
    values: [
      {x: "1日", y: 12}, {x: "2日", y: 17}, {x: "3日", y: 10},
      {x: "4日", y: 20}, {x: "5日", y: 16}, {x: "6日", y: 14}
    ]
  }
];

// 2. 初始化NVD3分组柱状图
nv.addGraph(function() {
  var chart = nv.models.multiBarChart()
    .groupSpacing(0.2) // 先设置一个较小的分组间距
    .showControls(false) // 隐藏分组/堆叠切换控件
    .reduceXTicks(false) // 显示所有日期的X轴标签
    .rotateLabels(45) // 旋转标签避免重叠
    .tooltip({contentGenerator: customTooltip}); // 自定义tooltip内容

  // 渲染图表
  d3.select('#chart-container svg')
    .datum(dailyData)
    .call(chart);

  // 3. 用D3调整柱子的位置和尺寸
  adjustBarPositions();

  // 响应窗口大小变化时重新调整
  nv.utils.windowResize(function() {
    chart.update();
    adjustBarPositions(); // 窗口 resize 后需要重新调整位置
  });

  return chart;

  // 自定义tooltip函数，同时显示最大值和平均值
  function customTooltip(d) {
    return `
      <h3>${d.x}</h3>
      <p><strong>最大值:</strong> ${d.series[0].value}</p>
      <p><strong>平均值:</strong> ${d.series[1].value}</p>
    `;
  }

  // 调整平均值柱子的位置，使其与最大值柱子重叠
  function adjustBarPositions() {
    // 获取两个系列的柱子元素
    const maxBars = d3.selectAll('.nv-group-0 .nv-bar');
    const avgBars = d3.selectAll('.nv-group-1 .nv-bar');

    // 遍历每个平均值柱子，调整其X坐标和宽度
    avgBars.each(function(_, index) {
      const maxBar = maxBars.nodes()[index];
      const maxX = parseFloat(d3.select(maxBar).attr('x'));
      const maxWidth = parseFloat(d3.select(maxBar).attr('width'));
      
      // 让平均值柱子宽度为最大值的70%，并居中对齐
      const avgWidth = maxWidth * 0.7;
      const offsetX = (maxWidth - avgWidth) / 2;

      d3.select(this)
        .attr('x', maxX + offsetX)
        .attr('width', avgWidth)
        .style('opacity', 0.8); // 可选：设置透明度，让底层的最大值柱子可见
    });
  }
});

关键细节说明 #

1. 柱子位置调整：通过获取最大值柱子的X坐标和宽度，计算出平均值柱子的偏移量，让它居中叠在最大值柱子上方，同时保持从Y轴底部起始（因为我们没有修改Y坐标和高度，高度由数据值决定）。
2. tooltip自定义：默认的tooltip可能只会显示单个系列的值，所以我们需要自定义tooltip内容，同时展示当天的最大值和平均值。
3. 窗口resize处理：当窗口大小变化时，NVD3会重新渲染图表，所以我们需要在resize回调中再次调用调整柱子位置的函数，确保叠加效果始终正确。

替代方案：纯D3实现 #

如果你觉得修改NVD3的DOM元素不够优雅，也可以直接用D3从零构建这种叠加柱状图，这样灵活性更高，但需要自己处理坐标轴、tooltip、响应式等功能，适合对D3比较熟悉的场景。

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