So erstellen Sie eine Interaktion mit SelectMenu in dc.js

Question

Ich versuche, ein Dashboard mit einem Datumswähler zu erstellen.

Ich habe es für andere Figuren gemacht, aber es funktioniert hier nicht. Ich bin ziemlich neu mit DC und ich kann nicht herausfinden, ob es ein Problem der Gruppe oder ein Problem des Datumsformats (oder etwas anderes) ist.

Hier ist mein Code:

 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/

Wenn jemand eine Antwort hat, werde ich dankbar sein. Vielen Dank im Voraus.

Answer 1

Hier sind zwei Bugs, einer in dc.js und einer in Ihrem Code.

Zunächst sieht es so aus, als ob SelectMenu nicht für Nicht-String-Schlüssel debuggt wurde. Es wird nach dem Wert gefiltert, der vom <option>-Tag abgerufen wird, das in eine Zeichenfolge konvertiert wurde.

Wie üblich gibt es einen Workaround. Sie können explizit die Saiten Daten konvertiert werden, bevor sie auf die Dimension erhalten, indem die filterHandler Wechsel:

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

Zweitens haben Sie eine copy-paste Fehler in Ihrem Code. Sie haben die richtige Idee eine neue Dimension und Gruppe zu jedem Diagramm zuweisen, bekommen aber groupdate und groupline sollten jeweils aus der entsprechenden Dimension ziehen:

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

Arbeitsgabel Ihrer Geige: http://jsfiddle.net/gordonwoodhull/uterbmhd/9/