未过滤的数据 on/off

Question

我正在使用复合图表查看未过滤的数据，但有时我想隐藏未过滤的数据并使 'y' 轴具有弹性。隐藏未过滤的数据并不难，只是图表上的事件侦听器，但是当隐藏未过滤的数据时，我无法使 'y' 轴上的弹性成为可能。也许在这种情况下甚至是不可能的。有什么想法吗？

      chart.select('.unfiltered_data').on('change', function() {
        if(!this.checked) {
          console.log("Stop showing unfiltered data!")
          chart.select('.sub._0')
            .attr('visibility', 'hidden')
          // chart.elasticY(true)
          chart.redraw()
        }
        else {
          console.log("Show unfiltered data!")
          chart.select('.sub._0')
            .attr('visibility', 'visible')
          // chart.elasticY(false)
          chart.redraw()
        }
      })

Answer 1

在 dc.js 中（几乎）总有一种方法可以做到这一点，因为 dc.js 是设计上的漏洞抽象！

首先，我尝试更改每个复合图表中包含哪些子图表，但这不是正确的方法，因为复合图表的子图表不能在重绘时更改，只能在渲染时更改。我们希望在显示未过滤和不显示之间切换时设置动画。

所以我认为我们可以

使用你的visibility想法
未过滤的隐藏时关闭elasticY，
改用过滤后的子图表域

所以我添加了一个复选框

  <label><input type="checkbox" id="unfiltered" name="unfiltered" checked>&nbsp;Show Unfiltered</label>

和一个全局变量

  var show_unfiltered = true;

处理程序如下所示：

  function ydomain_from_child1(chart) {
      chart.y().domain([0, chart.children()[1].yAxisMax()]);
      chart.resizing(true);
  }
  d3.select('#unfiltered').on('change', function() {
      show_unfiltered = this.checked;
      charts.forEach(chart => {
          chart.select('.sub._0').attr('visibility', show_unfiltered ? 'visible' : 'hidden');
          chart.elasticY(show_unfiltered);
          if(!show_unfiltered) {
              ydomain_from_child1(chart);
              chart.children()[1].colors(d3.schemeCategory10);
              chart.on('preRedraw.hide-unfiltered', ydomain_from_child1);
          }
          else {
              chart.children()[1].colors('red');
              chart.on('preRedraw.hide-unfiltered', null);
          }
      })
      dc.redrawAll();
  });

只要选中复选框，我们就会根据设置打开或关闭 elasticY。当未过滤的 not 显示时，我们将 simulate elasticY 用 preRedraw handler 确定第二个域（过滤后的）子图表。

此外，我们将on/off基于复选框的筛选图表的红色配色方案。

我已将此添加到 compare unfiltered example。

我发现我必须再做一个改变：当没有过滤器时，过滤图表被隐藏了。因此，如果未选中未过滤，我必须禁用此隐藏：

var any_filters = !show_unfiltered || charts.some(chart => chart.filters().length);
chart.select('.sub._1')
    .attr('visibility', any_filters ? 'visible' : 'hidden')

未过滤的数据 on/off

Unfiltered data on/off

crossfilter

dc.js