Question

我使用dc.js显示一些信息，我想添加一个下拉列表，选择日期范围为 - 全部，过去7天，过去30天，过去90天。

我如何将其添加到以下内容？

var dataTable = dc.dataTable("#dc-table-graph");

var data = [
 {date: "2014-08-15T06:30:43Z", amount: 10},
 {date: "2014-08-12T10:30:43Z", amount: 10 },
 {date: "2014-08-1T16:28:54Z", amount: 100 },
 {date: "2014-07-28T18:48:46Z", amount: 100 },
 {date: "2014-07-26T20:53:41Z", amount: 11 },
 {date: "2014-07-16T10:53:41Z", amount: 5 },
 {date: "2014-05-1T22:54:06Z", amount: 10 },
 {date: "2013-11-1T10:30:43Z", amount: 2 },
 ];

var dtgFormat = d3.time.format("%Y-%m-%dT%H:%M:%SZ");

data.forEach(function (d) {
  d.date   = dtgFormat.parse(d.date.substr(0,20));
  d.amount  = +d.amount;
  d.type = d.type;
});


var ndx = crossfilter(data);
var timeDimension = ndx.dimension(
  function (d) {return d.date;});

dataTable.width(960).height(800)
  .dimension(timeDimension)
  .group(function(d) { return "" })
  .size(20)
  .columns([
    function(d) { return d.date; },
    function(d) { return d.amount; },
  ])
  .sortBy(function(d){ return d.date; })
  .order(d3.ascending);

dc.renderAll();

http://jsfiddle.net/northside45/uvxzo785/

Answer 1

按时添加其他维度，以便它影响数据表的维度。（在crossfilter中，过滤维度只会影响其他维度，而不会影响其自身。）

然后在其他维度上使用filterRange以响应您的下拉列表。

https://github.com/square/crossfilter/wiki/API-Reference#wiki-dimension_filterRange

dc.js - 添加下拉菜单以选择日期范围

1 个答案: