crossfilter - Basic dc.js dataTable shows wrong data

Question

I have a basic dataTable in dc.js. I'm trying to get it to display a list of all the values in the data. But instead it shows a subset. Very simplified Fiddle here: https://jsfiddle.net/dhbrt0om/1/

let ndx = crossfilter(data);
let chart = dc.dataTable("#tableExample");
let data_examplefield = ndx.dimension(function(d) {
    return d.examplefield;
});

chart
  .columns([
    function(d) {
      return d.examplefield;
    },
  ])
  .dimension(data_examplefield)

dc.renderAll();

(full data in fiddle)

I've set the dataTable dimension to the relevant field. And the column function should return the field value. But it only shows 5 of the possible values. Stepping through the code with a breakpoint in the .columns function, I can see that it's returning 20 values - but not from the correct 20 fields.

I can see that if I alter data_examplefield to be:

let data_examplefield = ndx.dimension(function(d) {
    return d.examplefield ? d.examplefield : 'none';
});

This helps in returning the values...but why? And why isn't 'none' there?

I'm clearly misunderstanding something basic and am assuming I'll be kicking myself, but I just can't see it. Any help appreciated.

question from:https://stackoverflow.com/questions/65647700/basic-dc-js-datatable-shows-wrong-data

Answer 1

Ah, I see this is because every field needs to have a value. It's actually listed in the crossfilter gotchas wiki: https://github.com/crossfilter/crossfilter/wiki/Crossfilter-Gotchas

If the key function returns undefined for a single row, say due to a missing field, this can corrupt the entire index.