nvd3/d3.js 一个条形图在另一个之上答案

【问题标题】：nvd3/d3.js one bar chart on top of anothernvd3/d3.js 一个条形图在另一个之上
【发布时间】：2018-11-08 15:21:58
【问题描述】：

我有两个系列，最大值和平均值，每个系列都包含一个月中所有天的值。在我们的桌面软件中，我们曾经以条形图的形式显示这些，其中平均系列覆盖在最大系列上。由于平均值永远不会大于最大值，因此隐藏条没有问题。

在 NVD3 中，我只找到了对条形进行分组或堆叠的选项。分组占用太多空间。在另一侧堆叠会显示上条的错误值。只有两个条形图都从底轴开始，才能从 y 轴读取它们的实际值。

这可以在 NVD3 中以任何方式实现吗？

如果不是直接在 NVD3 中，是否可以通过访问底层 d3 对象来完成？

【问题讨论】：

标签： d3.js nvd3.js

【解决方案1】：

这是一种方法。您可以使用multibarChart 并仅启用堆叠选项并禁用默认显示的控件。

在我个人看来，我建议根据您要完成的任务使用原生 D3。

var chart = nv.models.multiBarChart().stacked(true).showControls(false);
d3.select('#chart svg').datum([
  {
    key: "Avg",
    color: "#51A351",
    values:
    [      
      { x : "Jan 1", y : 40 },
      { x : "Jan 2", y : 30 },
    ]
  },
  {
    key: "Max",
    color: "#BD362F",
    values:
    [      
      { x : "Jan 1", y : 12 },
      { x : "Jan 2", y : 8 },
    ]
  }
]).transition().duration(500).call(chart);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">

<div id="chart" style="height: 200px;"><svg></svg></div>

【讨论】：

谢谢，但我不明白它是如何解决问题的。首先，您的示例数据忽略了最大值总是高于平均值的事实。但实际问题是 1 月 1 日 f.e. 的最大值显示为 52 而不是 12，因为条形图是堆叠的。我希望它们被覆盖，以便可以从 y 轴正确读取每个条形值。
我试图通过在显示之前从最大值中减去平均值来使其工作，但随后工具提示显示错误的值。
@NicolasR，有一种方法可以为工具提示提供自定义渲染器，请参阅此处 - stackoverflow.com/questions/12416508/…。另外，就像我说的，NVD3 不像其他基于 d3 的包装器/框架和原生那样灵活。所以解决方案必须是“hacky”。
好的，结合自定义工具提示它应该可以工作。实际上我愿意切换到纯 d3，但对于第一个预览版本，我认为使用 nvd3 是个好主意。