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

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/