Question

我有一个时间序列，其中包含日期，金额和计数列。我只是想按月绘制金额的总和，并通过单击栏选择一个月，而不是使用画笔。我认为我的目标非常简单，但我已经翻了几天没有成功。主要问题是我在图表上应用了一个过滤器，但重绘图表时不考虑过滤器。谢谢你的帮助。

我正在使用：

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

Answer 1

this problem的有趣解决方案。

您可能希望在该处理程序中使用.redraw()而不是dimension.filter()，并且您还需要将您的范围包装在dc.js过滤器对象中，特别是RangedFilter：不同crossfilter的chart.filter() dc.js＆＃39; s null获取的对象不是数组。

Initial Range selection in DC.js chart

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

1 个答案: