Question

我正在尝试使用日期选择器创建仪表板。

我为其他数字做过，但它在这里不起作用。我对dc很新，我无法弄清楚这是组的问题还是日期格式的问题（或其他）。

这是我的代码：

        d3.csv("data/saccr_realloc_test.csv", function (error, saccr) {

                var parser = d3.time.format("%d.%m.%Y");
                //var formatter=d3.time.format("%d.%m.%Y");
                saccr.forEach(function(d) {
                        d.date   = parser.parse(d.date);
                        d.ead = +d.ead;
                    });


            var cptyChart = dc.barChart("#dc-cpty-chart");
            var lineChart = dc.lineChart("#volume-chart");

            var ndx = crossfilter(saccr);

            var dimdate = ndx.dimension(function(d) { return d.date;});
            var dimline = ndx.dimension(function(d) { return d.date;});
            var minDate = dimdate.bottom(1)[0].date;
            var maxDate = dimdate.top(1)[0].date;
            var dimcpty = ndx.dimension(function(d) { return d.cpty;});
            var dimcptyC = ndx.dimension(function(d) { return d.cpty;});

            var groupdate = dimline.group().reduceSum(function(d){return d.ead/1000000;});
            var groupline = dimline.group().reduceSum(function(d){return d.ead/1000000;});
            var groupcpty = dimcpty.group().reduceSum(function(d){return d.ead/1000000;});
            var spendhisto=dimcptyC.group().reduceSum(function(d){return d.ead/1000000;});
            var groupcptyC = remove_empty_bins(spendhisto);

            //a dropdown widget
            selectField=dc.selectMenu('#menuselect')
                    .multiple(true)
                    .dimension(dimcpty)
                    .group(groupcpty)
                    .numberVisible(10);

            selectField2=dc.selectMenu('#menuselect2')
                    .dimension(dimdate)
                    .group(groupdate);


            //a line chart
            lineChart
                    .height(350)
                    .width(450)
                    .margins({top:10, right:50, bottom: 30, left: 50})
                    .dimension(dimline)
                    .group(groupline)
                    .renderArea(true)
                    .transitionDuration(500)
                    .x(d3.time.scale().domain([minDate,maxDate]))
                    .elasticY(true)
                    .renderHorizontalGridLines(true);


            var barTip2=[]; //define some tips
            cptyChart
                    .ordering(function(d){return -d.value;})
                    .height(154)
                    .width(1300)
                    .transitionDuration(500)
                    .dimension(dimcptyC)
                    .group(groupcptyC)
                    .margins({top:10, right:10, bottom: 2, left: 60})
                    .gap(1)
                    .elasticY(true)
                    .elasticX(true)
                    .x(d3.scale.ordinal().domain(dimcptyC))
                    .xUnits(dc.units.ordinal)
                    .renderHorizontalGridLines(true)
                   .yAxis().tickFormat(d3.format("s"))


                dc.renderAll();

                function remove_empty_bins(source_group) {
                    return {
                        all:function () {
                            return source_group.all().filter(function(d) {
                                return d.value > 0.00001;
                            });
                        }
                    };
                }                    
            });

https://fiddle.jshell.net/qxL2a6ev/

如果有人有答案，我将不胜感激。非常感谢提前。

Answer 1

这里有两个错误，一个在dc.js中，一个在你的代码中。

首先，看起来没有为非字符串键调试selectMenu。它正在过滤它从<option>标记中检索到的值，该标记已转换为字符串。

像往常一样，有一种解决方法。您可以通过更改filterHandler来将字符串显式转换为日期之前的日期：

var oldHandler = selectField2.filterHandler();
selectField2.filterHandler(function(dimension, filters) {
  var parseFilters = filters.map(function(d) { return new Date(d);})
  oldHandler(dimension, parseFilters);
  return filters;
});

其次，您的代码中存在复制粘贴错误。您有正确的想法为每个图表分配新的维度和组，但groupdate和groupline应从相应的维度中绘制：

var groupdate = dimdate.group().reduceSum(function(d){return d.ead/1000000;});
var groupline = dimline.group().reduceSum(function(d){return d.ead/1000000;});

小提琴的工作叉：http://jsfiddle.net/gordonwoodhull/uterbmhd/9/

如何在dc.js中创建与selectMenu的交互

1 个答案: