从dc.js中选择条形图中的月份

我有一个包含日期，金额和计数列的时间系列。我只想按月绘制总量，并通过单击栏选择一个月，而不是使用画笔。我认为我的目标非常简单，但我正在翻找几天没有成功。主要问题是我在图表上应用了一个过滤器，但是在重新绘制图表时不会考虑过滤器。感谢您的帮助。从dc.js中选择条形图中的月份

我使用：

dc.js 2.0.2
d3.js 3.5.17
crossfilter 1.4

这是我的代码：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
<title>Just selecting a month </title> 
<meta charset="UTF-8"> 
<link rel="stylesheet" type="text/css" href="../static/lib/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="../static/lib/css/dc.css"/> 
    </head> 
    <body> 
<div> 
    Month selector 
    <a class="reset" href='javascript:chart.filterAll();dc.redrawAll();'> Reset</a> 
    <div id="time-chart"></div> 
</div> 

    <script type="text/javascript" src="../static/lib/js/d3.js"></script> 
    <script type="text/javascript" src="../static/lib/js/crossfilter.js"></script> 
    <script type="text/javascript" src="../static/lib/js/dc.js"></script> 
    <script type="text/javascript">  

    var dateFormat_in = d3.time.format.utc("%Y-%m-%d"); 

    var chart = dc.barChart("#time-chart"); 
    d3.csv('setdates.csv', function(error, dataset) { 
     if(error) 
      throw new Error(error); 
     dataset.forEach(function(d) { 
      d["date"] = dateFormat_in.parse(d["date"]); 
      d["amount"] = +d["amount"]; 
     }); 
     var ndx = crossfilter(dataset); 
     var monthDim = ndx.dimension(d => d3.time.month(d["date"])); 
     var monthGroup = monthDim.group().reduceSum(d => d["amount"]); 
     var minDate = monthDim.bottom(1)[0]["date"]; 
     var maxDate = monthDim.top(1)[0]["date"]; 
     minDate=d3.time.day.offset(minDate, -40); 
     //console.log([minDate,maxDate]);    

     chart 
      .width(400) 
      .height(260) 
      .x(d3.time.scale().domain([minDate, maxDate])) 
      .xUnits(d3.time.months) 
      .dimension(monthDim) 
      .group(monthGroup) 
      .margins({left: 50, top: 20, right: 0, bottom: 20}) 
      .elasticY(true) 
      .gap(60) 
      .centerBar(true).xAxisPadding(15).xAxisPaddingUnit('month') 
      .on('pretransition', function(ichart) { 
       ichart.selectAll("rect.bar").on("click", function (d) { 
        console.log([d.data.key,new Date(2016,d.data.key.getMonth()+1,1)]); 
        chart.filter([d.data.key,new Date(2016,5,1)]).redraw(); 
        console.log(chart.filters()) 
        //dc.renderAll(); 
       }); 
      }) 
      .brushOn(false) 
      .clipPadding(20); 
     chart.centerBar(true).xAxisPadding(15).xAxisPaddingUnit('month') 

     dc.renderAll(); 
    }); 
    </script>

这是我的数据：

date,amount,count 
2016-04-28,93.54,3.89 
2016-04-29,94.42,3.94 
2016-04-30,95.30,3.99 
2016-05-02,97.06,4.08 
2016-05-03,98.50,4.11 
2016-05-04,99.94,4.13 
2016-05-06,102.82,4.18 
2016-05-07,104.26,4.20 
2016-05-09,107.14,4.25 
2016-05-10,109.27,4.26 
2016-05-11,111.40,4.26 
2016-05-12,113.53,4.27 
2016-05-13,115.66,4.27 
2016-05-14,117.78,4.28 
2016-05-17,124.17,4.30 
2016-05-18,126.30,4.30 
2016-05-19,128.43,4.31 
2016-05-20,130.56,4.32 
2016-05-21,132.68,4.32 
2016-05-23,136.94,4.33 
2016-05-24,139.14,4.40 
2016-05-25,141.35,4.48 
2016-05-26,143.55,4.55 
2016-05-27,145.75,4.62 
2016-05-28,147.96,4.69 
2016-05-30,152.36,4.83 
2016-05-31,153.70,4.88 
2016-06-01,155.04,4.93 
2016-06-02,156.38,4.98 
2016-06-03,157.73,5.02 
2016-06-04,159.07,5.07 
2016-06-06,161.75,5.17 
2016-06-07,161.22,5.15 
2016-06-08,160.70,5.14 
2016-06-09,160.17,5.13 
2016-06-10,159.64,5.12 
2016-06-11,159.11,5.11 
2016-06-13,158.06,5.08 
2016-06-14,156.32,5.06 
2016-06-15,154.59,5.04 
2016-06-16,152.85,5.01 
2016-06-17,151.12,4.99 
2016-06-18,149.38,4.96

来源

2017-08-28 François

有趣的解决方案，以this problem。

你可能想.redrawGroup()而不是.redraw()该处理程序中，你还需要你的包裹范围内的dc.js过滤对象的内部，特别是RangedFilter：不像crossfilter的dimension.filter() dc.js的chart.filter()需要的对象不是一个数组。

Initial Range selection in DC.js chart

来源

2017-08-28 23:50:45 Gordon

非常感谢戈登为您的答案和您的图书馆。我会在几天内测试一下。 –

我修改了我的代码，如下所示： chart.filter（dc.filters.RangedFilter（d.data.key，new Date（2016，d.data.key.getMonth（）+ 1,1）））。redrawGroup（）; 但是没有更多的发生。此外，它似乎dc.filters.RangedFilter返回一个数组。这可能是为什么当我传递数组时，dc没有抱怨的原因。还有什么想法？ –

它是一个数组，但它除了数组数据外还有特殊的成员。我认为我所链接的问题和答案有更多的信息，以及[本问答]（https://stackoverflow.com/questions/27675327/storing-dc-js-filters-in-uri-and-restoring -them/27709651＃27709651）。请用您当前的代码更新您的问题（如果可以，请创建一个小提琴），我应该可以在明天看一看。 – Gordon

从dc.js中选择条形图中的月份

回答

相关问题