时间戳

首页 > 解决方案 > dc.js - 过滤时从堆积条形图中删除空箱

javascript - dc.js - 过滤时从堆积条形图中删除空箱

问题描述

这是堆积条形图的小提琴。此图表过滤另一个折线图。

为了删除空垃圾箱，我尝试了 dc.js FAQ、this example和this。

我在堆积条形图场景中看到了这个和这个，但我的分组不同。我尝试了不同的东西，但我无法让它工作。

很确定我错过了一些简单的东西。

请检查我的代码。难道我做错了什么？如何让 remove_empty_bins() 工作？

 var stack = dc.barChart('#stack');

 var XDimension = ndx.dimension(function (d) {return d.no;});

          var YDimension_before = XDimension.group().reduce(
            function(p, d) {
              p[d.sub_no] = (p[d.sub_no]|| 0) + +d.avg;
              return p;
            },
            function(p, d) {
              p[d.sub_no] = (p[d.sub_no]|| 0) - +d.avg;
              return p;
            },
            function() {
              return {};});

         var YDimension = remove_empty_bins(YDimension_before);

      stack.width(550)
          .height(400)
          .dimension(XDimension)
          .group(YDimension, '1', sel_stack(1))
          .transitionDuration(500)
          .xUnits(dc.units.ordinal)
          .x(d3.scaleBand())
          .margins({left: 80, top: 20, right: 80, bottom: 80})
          .brushOn(false)
          .clipPadding(20)
          .elasticX(true)
          .elasticY(true)
          .title(function(d) {
          return [ d.key + '[' + this.layer + '] ',
                  d.value[this.layer]].join('\n')
          });
 stack.stack(YDimension, '2', sel_stack(2))
                      .stack(YDimension, '3', sel_stack(3))

function remove_empty_bins(source_group) {
          return {
              all:function () {
                  return source_group.all().filter(function(d) {
                     return d.value != 0;

                  });
              }
          };
      }

标签： javascriptbar-chartdc.jscrossfilterstacked-chart

解决方案

我认为问题在于你正在减少到一个对象，所以d.value永远不会等于零。

您可以使用Object.values和Array.some来检查每个 bin 是否有任何堆栈非零：

function remove_competely_empty_bins(source_group) {
          return {
              all:function () {
                  return source_group.all().filter(function(d) {
                     return Object.values(d.value).some(v => v!=0);

                  });
              }
          };
      }

警告：如果不同的堆栈没有相同的 x 值，dc.js 会不高兴。所以这就是为什么你不想只删除空堆栈。仅当所有堆栈都为零时才移除垃圾箱。

推荐阅读