Как сохранить выбранные данные в таблице? - PullRequest
Новая
       40

Как сохранить выбранные данные в таблице?

1 голос
/ 08 апреля 2020

У меня есть логически одно измерение, которое меня интересует. Я хочу отфильтровать его, используя несколько фильтров - один на графике и один в объекте выбора текста. Вот образец , и вот как это выглядит:

Когда используются только текстовые селекторы, а затем, когда мы добавляем выбор в обзор:

Обратите внимание, что весь текст из селекторов и таблицы исчезает . Как сделать так, чтобы текст хотя бы в таблице был живым / видимым? Или это д c. 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();

1 Ответ

1 голос
/ 08 апреля 2020

Фильтрация на диаграмме серии является сложной задачей, поскольку данные имеют 2D-мультиключи, а bru sh имеет только одно измерение, поэтому ключи несовместимы.

Если вы хотите, чтобы чистка работала в к диаграмме серии, к сожалению, вам нужно использовать другое измерение, которое включает только ось X.

IOW, вы бы сохранили runDimension и runGroup такими, какие они есть, но добавили бы другое измерение, ссылаясь на тот же столбец, что и Размер X (keyAccessor): 

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

Затем установите его как в обзорной, так и в фокусной диаграммах. (Это объявление c. js, причуды, которые оба будут фильтровать.) 

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

К сожалению, это означает, что график будет фильтроваться сам - точки за пределами bru sh упадут до нуля. Я не знаю, как обойти это, по крайней мере, без сложного сокращения и фальшивой группы, чтобы преобразовать ее в многопользовательский формат, требуемый диаграммой серии.

Вилка вашей скрипки. .

Как примечание, обычно измерения возвращают скалярные (строка / число) значения. Уместно возвращать массивы из функций клавиш измерений для точечных и последовательных диаграмм, а также при использовании размеров тегов.

В частности, run3Dimension должно быть 

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