如何将选定的数据保留在表中？

Question

我有一个我感兴趣的逻辑单一维度。我想使用多个过滤器对其进行过滤 - 一个在图表中，一个在文本选择对象中。这是a sample，它是这样的：

当仅使用文本选择器时，然后当我们在概览中添加选择时：

请注意，选择器和表格中的所有文本都会消失。如何使至少表格中的文本保持活跃/可见？还是 dc.js 的 bug？

 var data = [{
      'name': 'c',
      'time': 0,
      'val': 1
    },
    {
      'name': 'c',
      'time': 1,
      'val': 7
    },
    {
      'name': 'b',
      'time': 0,
      'val': 2
    },
    {
      'name': 'b',
      'time': 1,
      'val': 3
    },
    {
      'name': 'a',
      'time': 0,
      'val': 4
    },
    {
      'name': 'a',
      'time': 1,
      'val': 5
    }
  ];

  var ndx = crossfilter(data);
  var runDimension = ndx.dimension(function(d) {
    return [d.name, +d.time];
  });

  var run2Dimension = ndx.dimension(function(d) {
    return [d.name, d.time];
  });

  var run3Dimension = ndx.dimension(function(d) {
    return [d.name];
  });

  var runGroup = runDimension.group().reduceSum(function(d) {
  return +d.val;
});

  var select1 = dc.selectMenu('#test-select1');
  var select2 = dc.selectMenu('#test-select2');
  var overview = dc.seriesChart('#test-view');
  var focus = dc.seriesChart('#test-view2');
var datatable = dc.dataTable('#test-dt');


  select1
    .dimension(run3Dimension)
    .group(run3Dimension.group())
    .multiple(true)
    .numberVisible(10)
    .controlsUseVisibility(true);
  select2
    .dimension(run2Dimension)
    .group(run2Dimension.group())
    .multiple(true)
    .numberVisible(10)
    .controlsUseVisibility(true);

  datatable
    .dimension(run3Dimension)
    // Group table by
    //.section(function(d) {
    // return d.val;
    //})
    .columns(['name', 'time', 'val'])
    .size(data.length);

overview
  .width(768)
  .height(100)
  .chart(function(c) {
    return dc.lineChart(c).curve(d3.curveCardinal);
  })
  .x(d3.scaleLinear().domain([0, 20]))
  .brushOn(true)
  .xAxisLabel("Run")
  .clipPadding(10)
  .dimension(runDimension)
  .group(runGroup)
  .seriesAccessor(function(d) {
    return "Expt: " + d.key[0];
  })
  .keyAccessor(function(d) {
    return +d.key[1];
  })
  .valueAccessor(function(d) {
    return +d.value;
  });

focus
  .width(768)
  .height(480)
  .chart(function(c) {
    return dc.lineChart(c).curve(d3.curveCardinal).evadeDomainFilter(true);
  })
  .x(d3.scaleLinear().domain([0, 20]))
  .brushOn(false)
  .yAxisLabel("Measured Speed km/s")
  .yAxisPadding("5%")
  .xAxisLabel("Run")
  .elasticY(true)
  .dimension(runDimension)
  .group(runGroup)
  .mouseZoomable(true)
  .rangeChart(overview)
  .seriesAccessor(function(d) {
    return "Expt: " + d.key[0];
  })
  .keyAccessor(function(d) {
    return +d.key[1];
  })
  .valueAccessor(function(d) {
    return +d.value;
  })
  .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));


  dc.renderAll();

Answer 1

在序列图上过滤很棘手，因为数据有二维多键，而画笔只有一维，所以键不兼容。

如果您想在系列图表中使用刷牙，不幸的是，您需要使用仅包含 X 轴的不同维度。

IOW 您将保持 runDimension 和 runGroup 的原样，但添加另一个维度，引用与 X 维度相同的列 (keyAccessor)：

var seriesFilterDim = ndx.dimension(function(d) {
  return +d.time;
});

然后将其设置在概览图和焦点图中。 （这是一个 dc.js 的怪癖，两者都会过滤。）

overview
  .dimension(seriesFilterDim)
focus
  .dimension(seriesFilterDim)

不幸的是，这意味着图表将自行过滤 - 画笔外的点将降至零。我不知道解决这个问题的任何方法，至少不是没有复杂的缩减和一个假组将其转换为系列图表所需的多键格式。

Fork of your fiddle..

附带说明，通常维度会返回标量（字符串/数字）值。仅适用于从散点图和系列图的维度键函数以及使用标签维度时返回数组。

特别是您的run3Dimension 应该是

  var run3Dimension = ndx.dimension(function(d) {
    return d.name;
  });