NVD3 图表删除 0 个值条答案

【问题标题】：NVD3 Charts Remove 0 Value BarsNVD3 图表删除 0 个值条
【发布时间】：2014-03-13 12:33:00
【问题描述】：

对于 NVD3 multiBarChart，如何删除零值条？我尝试将 y 值设置为 null，但它们不会消失。

不幸的是，我没有足够的声誉来发布图片，所以这里是显示问题的 ascii。以下 ascii 图表中有两个堆叠系列——X 和 Z，下划线 (_) 表示 Z 系列中的零值条：

|
|       _
|     _ X   
|   _ X X X 
| _ X X X X X
| X X X X X X
          Z Z
            Z

我需要的是：

|
|       
|       X   
|     X X X 
|   X X X X X
| X X X X X X
          Z Z
            Z

编辑：这里是图表的 JSFiddle http://jsfiddle.net/dnn4K/1/

我已经包含了我的一个尝试修复，它有些工作（但由于某种原因不在小提琴中）。尝试的修复是通过 CSS 选择器找到第一个矩形并使用 rect.next() 循环遍历它们，如果高度为 1，则将高度设置为 0。这对我不起作用的原因是因为矩形不在调用函数时就已经存在了——所以现在我需要弄清楚如何让函数在动画完成后运行。

【问题讨论】：

您能否将您的工作代码放在 [JSFiddle](jsfiddle.net) 上，以便有人可以帮助您解决问题。
正在处理它。我无法在 JSFiddle 上运行相同的代码——您是否知道如何让外部资源在那里为 NVD3 正常工作？我已经全部加载了，但它似乎仍然不起作用。
确保您的外部网址有效。始终检查浏览器控制台以查看是否抛出任何错误。
您可以避免在数据系列中使用 0 传递值，但我不建议这样做，如果 First Bar 和 Second Bar 都没有数据，它将破坏日期中的顺序。跨度>

标签： nvd3.js

【解决方案1】：

其实我发现修改nvd3源代码并不是真正的解决方案。

所以我只是添加了一个覆盖所有精确为 1 像素高度的矩形的覆盖 CSS 规则。

仍然不是最优的，但我们必须等待新版本的 nvd3，希望有一个完全可配置的模型才能正确地做到这一点。

.nvd3 rect[height="1"] {
  display: none !important;
}

【讨论】：

【解决方案2】：

终于找到了答案。在 nv.d3.js 文件中，有如下一行代码：

.attr('height', function(d,i) {
          return Math.max(Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0))),1); //Min value of stacked bar charts set here
        })

这需要改成如下：

.attr('height', function(d,i) {
          return Math.max(Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0))),0); //Min value of stacked bar charts set here
        })

就是这样。对于堆积条形图，最小值实际上只是设置为 1 而不是 0。这是在 nv.d3.js 文件的 multiBar 函数中，在第 7804 行附近。希望这可以帮助遇到同样问题的其他人。

【讨论】：