时间戳

首页 > 解决方案 > 如何将选定的数据保留在表中？

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

问题描述

我有一个我感兴趣的逻辑单一维度。我想使用多个过滤器对其进行过滤——一个在图表中，一个在文本选择对象中。这是一个示例，它的外观如下：

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

请注意，选择器和表格中的所有文本都会消失。如何使至少表格中的文本保持活跃/可见？还是 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();

标签： javascriptfilteringdc.jscrossfilterdata-processing

解决方案

对系列图进行过滤很棘手，因为数据有 2D 多键，而画笔只有一维，所以键不兼容。

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

IOW 您将保留它们runDimension的方式，但添加另一个维度，引用与 X 维度 ( )runGroup相同的列：keyAccessor

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

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

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

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

你的小提琴的叉子。.

作为旁注，通常维度将返回标量（字符串/数字）值。仅适用于从散点图和系列图的维度键函数以及使用标签维度时返回数组。

特别是你run3Dimension应该是

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

推荐阅读