Question

对于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

编辑：这是图http://jsfiddle.net/dnn4K/1/

的JSFiddle

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

Answer 1

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

所以我只是添加了一个重写的CSS规则，它隐藏了任何正好1像素高度的矩形。

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

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

Answer 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。这是在第7804行的nv.d3.js文件的multiBar函数中。希望这可以帮助其他人解决同样的问题。

NVD3图表删除0个值栏

2 个答案: