series chart example: zooming causes the buttons to display incorrect data

[joergplewe]

In the series chart example:

Use mouse to zoom into the chart. From now on the buttons [1][2][3] no longer display the correct data.

A workaround is to clear filter in function load_it(). I suppose that hints to a bug somewhere else?

function load_button(file) {
    return function load_it() {
        d3.csv(file).then(function(experiments) {
            runDimension.filter(null);    // <-- this is the workaround
            ndx.remove();
            ndx.add(experiments);
            dc.redrawAll();
        });
    };
}

[gordonwoodhull]

Confirmed, thanks @joergplewe!

This is weird behavior. This example is trying to replace all the data, so all of it does need to be removed.

Zooming implicitly sets a filter, and crossfilter.remove removes all records that match the current filters: not all data will be removed if a filter is active.

So that explains why your workaround works. Another workaround is

ndx.remove(() => true);

This is slightly safer because the crossfilter state remains consistent with the chart state. It uses the "remove with predicate" feature of crossfilter 1.4 (crossfilter/crossfilter#6).

I'm having trouble explaining the observed behavior, with the new lines coming in below everything else. The old lines do steadily get taller and taller, which makes sense with points being added too many times. But why not just parts of those lines? I hope to take another look.

In any case, you are right that the example needs to be fixed. Thanks for the report!

[joergplewe]

Strange enough, even when removing filter, the zoom (=== the filter) is re-established after loading new data?

[gordonwoodhull]

dc.js keeps track of the zoom and filters separately from crossfilter.

In fact, crossfilter doesn't provide very many getters, so everyone downstream is forced to keep track of this stuff on their own (and keeping it in sync, which is why I recommend manipulating filters through the charts only).

So if you remove the filter, dc.js doesn't know about it and will happily go along thinking the filter is how it left it. If there were other charts on the page, you'd see some inconsistencies, because the filter will be reapplied whenever the chart is zoomed.

[gordonwoodhull]

I'm updating the replacing data example to use crossfilter 1.4:

function resetData(ndx) {
    ndx.remove(() => true);
}

Should be much more reliable. 😉

Will update the area example when I do the next release.