如何使用.removeFilterHandler禁用bubbleChart上的过滤器?

时间:2017-05-09 16:29:19

标签: dc.js

我需要取消当用户点击bubbleChart中的圆圈时发生的过滤,但要保持选择'的班级分配。并且'取消选择'如果可能的话。如果不可能,我想用我自己的脚本替换默认点击行为。

根据API文档,我可以在bubbleChart上使用.removeFilterHandler或.resetFilterHandler,因为图表类型依赖于baseMixin。

https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+removeFilterHandler

但它没有用。当我点击bubbleChart中的圆圈时,同一仪表板中的直方图会过滤。我希望这会停止。谁能看到我做错了什么?我正在使用DC.js v2.0.2。感谢

  var rfh = bubbleChart.resetFilterHandler();

  bubbleChart.width(738)
          .height(315)
          .margins({left:40,right:30,top:15,bottom:30})
          .dimension(idDimBubble)
          .group(idGrpBubble)
          .clipPadding(10)
          .renderLabel(false)
          .keyAccessor(function (p) { return p.value[selectArrays[0][1]] / p.value.name.length; })
          .valueAccessor(function (p) { return p.value[selectArrays[0][0]] / p.value.name.length; })
          .radiusValueAccessor(function (p) { return p.value['revenue']+1; })
          .title(function(d){
            var tempIndex = filters[0].indexOf(window.gran);
            var tempString = filters[1][tempIndex]+': ' + d.value.what;
            var str = '';
            if (window.gran!='company') {
              str = 'Avg ';
            }
            tempString += '\n'+str+selectArrays[1][0]+': '+d3.format('.3s')(Math.round(d.value[selectArrays[0][0]] / d.value.name.length));
            tempString += '\n'+str+selectArrays[1][1]+': '+d3.format('.3s')(Math.round(d.value[selectArrays[0][1]] / d.value.name.length));

            return tempString;
          })
          .minRadius(3)
          .maxBubbleRelativeSize(0.005)
          .x(d3.scale.linear().domain([0, selectArrays[3][1]]))
          .y(d3.scale.linear().domain([0, selectArrays[3][0]]))
          .r(d3.scale.linear().domain([0, 5000]))
          .renderHorizontalGridLines(true)
          .renderVerticalGridLines(true)
          .removeFilterHandler(function (filters, filter) {
              console.log(filters);//doesn't output anything
              for (var i = 0; i < filters.length; i++) {
                  if (filters[i] <= filter && filters[i] >= filter) {
                      filters.splice(i, 1);
                      break;
                  }
              }
              return filters;
          });

1 个答案:

答案 0 :(得分:1)

这里有一些函数的名称含糊不清。

removeFilterHandler本身不会删除过滤器;当用户操作导致删除过滤器时调用它。它只是在应用之前更改列表。

您要做的是保持添加和删除过滤器的方式,但更改(禁用)它们应用于维度的方式。

这是filterHandler的用途。 Similar name, different functionality.也许它应该被称为applyFiltersHandler。或者其他什么。

您可以将其实现为传递:

chart.filterHandler(function (dimension, filters) {
    return filters;
});

它会保留过滤器列表,但不会以这种方式将它们应用于维度。