从 URL 恢复日期范围过滤器

Question

我希望在 URL 中实现存储过滤器，以便轻松共享它们。它适用于行和饼图的简单过滤器，但我正在尝试研究如何从日期范围内的 URL 恢复过滤器。

我已经实现了这里使用的相同代码 -> https://github.com/Edouard-Legoupil/3W-Dashboard/blob/gh-pages/index.html

function showFilters() {
  var filterStrings = [];
  var charts = dc.chartRegistry.list();
  charts.forEach(function (chart) {
      chart.filters().forEach(function (filter) {
          filterStrings.push(filter);
      })
  })
  d3.select("#filters").text(filterStrings);
  }

function getFiltersValues() {
  var filters = [
      { name: 'season', value: seasonChart.filters()},
      { name: 'homeaway', value: homeAwayChart.filters()}];

  var recursiveEncoded = $.param( filters );
  location.hash = recursiveEncoded;
  console.log(filters);
}

function initFilters() {
  // Get hash values
  var parseHash = /^#season=([A-Za-z0-9,_\-\/\s]*)&homeaway=([A-Za-z0-9,_\-\/\s]*)$/;
  var parsed = parseHash.exec(decodeURIComponent(location.hash));
  function filter(chart, rank) { 
      if (parsed[rank] == "") {
          chart.filter(null);
      }
      else {
          var filterValues = parsed[rank].split(",");
          for (var i = 0; i < filterValues.length; i++ ) {
              chart.filter(filterValues[i]);
          }
      }
  }
  //filter the charts using the filters we've got from the url
  if (parsed) {
      filter(seasonChart, 1);
      filter(homeAwayChart, 2);
      }
  }

可以在此处找到完整的仪表板以了解其当前的工作方式 - http://www.vitalswansea.com/stats/index2.php

我在这个问题 - storing dc.js filters in URI and restoring them 中注意到 Gordon 编写了类似的代码（如下）来解决这个问题，但我自己难以实现。

for (var i = 0; i< filterObjects.length; i++)
{
   var filter = filterObjects[i].Filter;
   if(filter instanceof Array) filter = dc.filters.RangedFilter(filter[0], filter[1]);
   dc.chartRegistry.list()[filterObjects[i].ChartID-1].filter(filter);
}

提前谢谢你。

Answer 1

日期范围的初始化如下所示，解析日期并构建RangedFilter：

  else {
      var filterValues = parsed[rank].split(",");
      var filter = dc.filters.RangedFilter(new Date(filterValues[0], filterValues[1]);
      chart.filter(filter);
  }

每个图表都会有所不同，所以我不知道如何将它放入这样的一个函数中。

以上内容适用于在排行榜位置图表中保存日期范围。它不适用于 Season Total Points 图表，因为它使用序数 x 刻度。这就是为什么您单击以选择单个条而不是使用画笔来选择该条的原因。

对于那个，您的filterValues 将是一个单独的日期数组，看起来您不会解析此列的日期，在这种情况下您会这样做

chart.filter([filterValues]);

当您传递一个包含单个数组的数组时，dc.js 假定内部数组是一组应该切换的过滤器。 （我不知道为什么。）

一般来说，每个图表都会有不同类型的过滤器。过滤器只有几种，因此也许可以将其概括为通用实用程序，但是您仍然必须知道每个图表所期望的类型和形状。

Answer 2

我在 initFilters() 函数中添加了另一个函数：

function filterDateRange(chart, rank) {  
      if (parsed[rank] == "") {
          chart.filter(null);
      }
      else {
        var filterValues = parsed[rank].split(",");
        var filter = dc.filters.RangedFilter(new Date(filterValues[0]), new Date(filterValues[1]));
        chart.filter(filter);
    }
  }

然后只是使用此函数将过滤器应用于图表：

  if (parsed) {
      filter(seasonChart, 1);
      filter(homeAwayChart, 2);
      filterDateRange(positionChart, 3);
  }

我还必须更改 parseHash 变量以查看日期等中的括号：

var parseHash = /^#season=([A-Za-z0-9,_\-\/\s]*)&homeaway=([A-Za-z0-9,_\-\/\s]*)&dates=([A-Za-z0-9,:&+(/\)_\-\/\s]*)$/;

示例链接：http://www.vitalswansea.com/stats/index2.php#season=2014%2F2015%2C2013%2F2014&homeaway=H&dates=Wed%20May%2028%202014%2017%3A57%3A55%20GMT%2B0100%20(GMT%20Daylight%20Time)%2CTue%20Apr%2026%202016%2022%3A22%3A22%20GMT%2B0100%20(GMT%20Daylight%20Time)