dc.js - "TypeError: _x is undefined" when using the brush

Question

I am quite stuck with an issue on a series of charts I realized with dc.js.

The issue is in a scenario similar to the Nasdaq example on the main dc.js site: a stacked chart filtered using a bar chart with the brush.

The problem is that if I keep the browser console open, after everything loads, if I try to use the brush to select a period, an error appears in the console.

In Firefox I get this:

TypeError: _x is undefined[Learn More] coordinate-grid-mixin.js:468:12
    prepareXAxis coordinate-grid-mixin.js:468:12
    drawChart coordinate-grid-mixin.js:1139:8
    _dc/dc.coordinateGridMixin/_chart._doRedraw coordinate-grid-mixin.js:1128:8
    _dc/dc.baseMixin/_chart.redraw base-mixin.js:743:21
    _dc/dc.redrawAll core.js:250:8
    _dc/dc.baseMixin/_chart.redrawGroup base-mixin.js:794:12
    _dc/dc.coordinateGridMixin/_chart._brushing/< coordinate-grid-mixin.js:1032:16
    _dc/dc.events.trigger/< events.js:34:12

While in Chrome I get this:

Uncaught TypeError: Cannot read property 'domain' of undefined
    at prepareXAxis (coordinate-grid-mixin.js:468)
    at drawChart (coordinate-grid-mixin.js:1139)
    at Object._chart._doRedraw (coordinate-grid-mixin.js:1128)
    at Object._chart.redraw (base-mixin.js:706)
    at Object.dc.redrawAll (core.js:250)
    at Object._chart.redrawGroup (base-mixin.js:757)
    at coordinate-grid-mixin.js:1032
    at events.js:34

I tried different dc.js versions and I get the same issues (from the stable 2.0.5 to the last one that has been used for the logs above 2.1.9). The only difference I got with a dc.min.js version is that instead of "undefined _x" I got an "undefined z".

Here is a picture just to get a feeling:

Now the good part of the issue, is that the charts work fine. I can visualize the data and filter it, nonetheless, the console gets soon filled up with the same error that continues to appear.

here are the more relevant parts of my code:

// a bit of copy paste to get the sense
var dateDim = ndx.dimension(function (d) { return d.date; });
var grpTime =
    dateDim
        .group(function (d) { return d3.time.minute(d); })
        .reduce(dash_reduceAdd, dash_reduceSub, dash_reduceInit);

var minDate = d3.time.minute(dateDim.bottom(1)[0]["date"]);
var maxDate = d3.time.minute(dateDim.top(1)[0]["date"]);

stackChart
    .renderArea(true)
    .height(200)
    .margins({top: 15, right: 50, bottom: 20, left: 40})
    .x(d3.time.scale().domain([minDate, maxDate]))
    .xUnits(d3.time.minutes)
    .legend(dc.legend().x(70).y(20).itemHeight(13).gap(5))
    .renderHorizontalGridLines(true)
    .title(stackChartTitle)
    .elasticY(true)
    .transitionDuration(1500)
    .dimension(dateDim)
    .group(grpTime, str_a)
    .valueAccessor(function(d) { return d.value.val_a_Avg; })
    .stack(grpTime, str_b, function(d) { return d.value.val_b_Avg; })
    .ordinalColors(['#4faf00', '#5c00e6'])
    .hidableStacks(true)
    .rangeChart(volumeChart)
    .controlsUseVisibility(true)
    .brushOn(false)
;

volumeChart
    .height(60)
    .margins({top: 0, right: 50, bottom: 20, left: 40})
    .dimension(dateDim)
    .group(grpTime)
    .valueAccessor(function(d) { return d.value.vAvg; })
    .centerBar(true)
    .gap(1)
    .x(d3.time.scale().domain([minDate, maxDate]))
    .xUnits(d3.time.minutes)
    .elasticY(true)
    .alwaysUseRounding(true)
    .on('renderlet', function (chart) {
        var rangeFilter = chart.filter();
        var focusFilter = chart.focusChart().filter();
        if (focusFilter && !rangeFilter) {
            dc.events.trigger(function () {
                chart.focusChart().replaceFilter(rangeFilter);
            });
        }
    })
    .brushOn(true)
    .controlsUseVisibility(true)
;

stackChart.render();
volumeChart.render();

Any help would really be appreciated, I am not really sure how to move to fix this issue.

EDIT I am adding the reduce functions here:

function groupArrayAdd(keyfn) {
    var bisect = d3.bisector(keyfn);
    return function(elements, item) {
        var pos = bisect.right(elements, keyfn(item));
        elements.splice(pos, 0, item);
        return elements;
    };
}
function groupArrayRemove(keyfn) {
    var bisect = d3.bisector(keyfn);
    return function(elements, item) {
        var pos = bisect.left(elements, keyfn(item));
        if(keyfn(elements[pos])===keyfn(item))
            elements.splice(pos, 1);
        return elements;
    };
}
// Custom reduce functions
function dash_reduceAdd(p, v) {
    ++p.count;
    // Sums
    p.val_a_Sum += v.va;
    p.val_b_Sum += v.vb;
    // Averages
    p.val_a_Avg = p.count ? p.val_a_Sum / p.count : 0;
    p.val_b_Avg = p.count ? p.val_b_Sum / p.count : 0;
    // Maxes
    p.vaMax = groupArrayAdd(function (d) { return d.va; })(p.vaMax, v.va);
    p.vbMax = groupArrayAdd(function (d) { return d.vb; })(p.vbMax, v.vb);
    return p;
}
function dash_reduceSub(p, v) {
    --p.count;
    // Sums
    p.val_a_Sum -= v.va;
    p.val_b_Sum -= v.vb;
    // Averages
    p.val_a_Avg = p.count ? p.val_a_Sum / p.count : 0;
    p.val_b_Avg = p.count ? p.val_b_Sum / p.count : 0;
    // Maxes
    p.vaMax = groupArrayAdd(function (d) { return d.va; })(p.vaMax, v.va);
    p.vbMax = groupArrayAdd(function (d) { return d.vb; })(p.vbMax, v.vb);
    return p;
}
function dash_reduceInit() {
    return { count:0,
             val_a_Sum:0, val_b_Sum:0,
             val_a_Avg: 0, val_b_Avg: 0,
             vaMax: [], vbMax:[] };
}

Answer 1

I found the issue causing it. It took me really quite some time. I went disassembling the code, removing one part after the other and checking if the issue persisted...

...at the end I found a really stupid problem. I forgot to remove one lineChart variable that was declared but never rendered...I havo no clue how I didn't noticed it before but anyway, after removing that chart the issue disappeared.

It was impossible here to find a solution from the code, I am answering just because it might be a clue for future people having that kind of error message.