Question

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

我已实现了此处使用的相同代码 - ＆gt; 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戈登编写了类似的代码（下面）以解决这个问题，但我自己很难实现。

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);
  }

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

以上内容适用于在联赛表位置图表中保存日期范围。它不会为季节总分数图表工作，因为它使用了序数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)

恢复日期范围从URL过滤

2 个答案: