问

NVD3图表删除0个值栏

影子张被占用发布于 2023-01-18 12:30

char

对于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.这对我不起作用的原因是因为矩形没有在调用函数时存在 - 所以现在我需要弄清楚如何在动画完成后让函数运行.

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函数中.希望这可以帮助其他人解决同样的问题.

2023-01-18 12:32 回答

丁城雨

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

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

仍然不是最优的,但我们将不得不等待新版本的nvd3,希望是一个完全可配置的模型来正确地做到这一点.
```
.nvd3 rect[] {
  display: none !important;
}
```
2023-01-18 12:34 回答

百变精灵99

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签