d3.js - dc.js - 使用画笔时为 "TypeError: _x is undefined"

Question

我在使用 dc.js 实现的一系列图表上遇到了一个问题。

问题出在与 dc.js 主站点上的 Nasdaq 示例类似的场景中:使用带画笔的条形图过滤堆积图。

问题是，如果我保持浏览器控制台打开，在加载所有内容后，如果我尝试使用画笔选择句点，控制台中会出现错误。

在 Firefox 中我得到这个:

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

在 Chrome 中我得到了这个:

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

我尝试了不同的 dc.js 版本，但我遇到了同样的问题(从稳定的 2.0.5 到最后一个用于 2.1.9 以上日志的版本)。我得到的 dc.min.js 版本的唯一区别是，我得到的不是“undefined _x”，而是“undefined z”。

上图感受一下:

现在问题的重要部分是图表工作正常。我可以可视化数据并对其进行过滤，但是，控制台很快就会充满继续出现的相同错误。

以下是我的代码中更相关的部分:

// 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();

非常感谢任何帮助，我不太确定如何解决此问题。

编辑 我在这里添加 reduce 函数:

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

我找到了导致它的问题。我真的花了很多时间。我去反汇编代码，一个接一个地删除并检查问题是否仍然存在...

...最后我发现了一个非常愚蠢的问题。我忘记删除一个已声明但从未呈现的 lineChart 变量...我不知道我以前怎么没有注意到它，但无论如何，删除该图表后问题就消失了。

这里不可能从代码中找到解决方案，我正在回答只是因为它可能是 future 出现此类错误消息的人的线索。