Question

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

问题出现在类似于主要dc.js网站上的纳斯达克示例的场景中：使用带有画笔的条形图过滤的堆积图表。

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

在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”我得到了一个“未定义的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变量...我不知道我之前没有注意到它但是无论如何，在删除该图表后问题就消失了。

这里找不到代码的解决方案是不可能的，我回答的原因只是因为它可能是未来有这种错误信息的人的线索。

dc.js - 使用画笔

1 个答案: