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

Question

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

仅使用文本 select 或当我们在概述中添加 selection 时：

请注意，来自 select 和 table 的所有文本都消失了 。如何使至少 table 中的文本成为 alive/visible？还是 dc.js 错误？

 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

在系列图表上过滤比较棘手，因为数据有2D多键，画笔只有一维，所以键不兼容。

如果您希望在系列图表中进行刷亮，很遗憾，您需要使用仅包含 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..

作为旁注，通常维度将 return 标量 (string/number) 值。它仅适用于 return 来自散点图和系列图的维度键函数的数组，以及在使用标签维度时。

特别是你的run3Dimension应该是

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

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

How to keep selected data in the table?

javascript

filtering

data-processing

crossfilter

dc.js