Как создать взаимодействие с selectMenu в dc.js

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/