Question

我渲染了一个堆积条，然后我试图用点击按钮的新过滤器重新绘制图表。现在，当我单击按钮时，前一个轴仍然存在，但图表消失，不会重新绘制。我不知道我在这里失踪了什么.. 这是stackedBar的JSFiddle。

function myFunc(){
var dimForHour = cf.dimension(function(d) { return d.date; });
    dimForHour.filter([hour, today]);

var dimByChannel = cf.dimension(function(d) { return d.channelUUID; });
var groupAvgChan = dimByChannel.group().reduce(
function reduceAdd(p, v) {
    p.bytesTxd = p.bytesTxd + v.bytesTxd;
    p.count = p.count + 1;
    p.avg = p.bytesTxd / p.count;
    p.avgTot = p.avgTot + p.avg;
    p.avgPrcnt = (p.avg / p.avgTot) * 100;
    if(p.max < v.bytesTxd) { p.max = v.bytesTxd; }
    p.maxTot = p.maxTot + p.max;
    p.maxPrcnt = (p.max / p.maxTot) * 100;
    return p;
},
function reduceRemove(p, v) {
    p.bytesTxd = p.bytesTxd - v.bytesTxd;
    p.count = p.count - 1;
    p.avg = p.bytesTxd / p.count;
    p.avgTot = p.avgTot - v.avgTot;
    p.avgPrcnt = (p.avg / p.avgTot) * 100;
    if(p.max > v.bytesTxd) { p.max = v.bytesTxd; }
    p.maxTot = p.maxTot - p.max;
    p.maxPrcnt = (p.max / p.maxTot) * 100;
    return p;
},
function reduceInitial() {
    return {
        bytesTxd:0, count:0, avg:0, avgTot:0, 
        avgPrcnt:0, max:0, maxTot:0,maxPrcnt:0};
                                           });
/*chanUtil = dc.barChart("#chanUtil")
                                    chanUtil
                                    .dimension(dimByChannel)
                                    .group(groupAvgChan,"Avg Utilization %").valueAccessor(function(d) { return d.value.avgPrcnt; })
                                    .stack(groupAvgChan,"Max Utilization %", function(d) { return d.value.maxPrcnt; })
                                    .x(d3.scale.ordinal().domain(data.map(function (d) { return d.channelUUID })))
                                    .xUnits(dc.units.ordinal);*/

dc.redrawAll();
}

Answer 1

我不确定你想要计算什么，但问题似乎来自这一行：

    p.avgTot = p.avgTot - v.avgTot;

与相应的

不匹配

    p.avgTot = p.avgTot + p.avg;

v没有会员avgTot，因此您获得NaN，一切都从那里开始。调试这类事情的最佳方法是

在重绘上放置一个断点，以查看组中的值
在reduce函数中放置断点，以查看计算中出现了什么问题。

更改reduceRemove函数以使用

    p.avgTot = p.avgTot - p.avg;

似乎解决了这个问题（至少在单击按钮后仍有条形图。）

你小提琴的叉子：http://jsfiddle.net/gordonwoodhull/0vvh1xex/6/

我还添加了elasticY(true)以便能够更好地查看更改。是的，这里的酒吧向上过渡特别错误;如果你能够升级到dc.js 2.0（测试版6），那就修好了。

注意：myFunc中有一些死代码：看起来你正在重新创建dimByChannel和groupAvgChan完全相同，然后不再使用它们。

dc.js：filter＆amp;点击重绘图表

1 个答案: