dc.js：点击过滤并重绘图表

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;

似乎解决了这个问题（至少，点击按钮后仍然有条）。

你的 fiddle 分支：http://jsfiddle.net/gordonwoodhull/0vvh1xex/6/

我还添加了 elasticY(true) 以便能够更好地看到更改。是的，柱形图的向上过渡在这里尤其错误；如果您能够升级到 dc.js 2.0（在 beta 6 上），那就是固定的。

注意：您在 myFunc 中有一些死代码：看起来您正在重新创建完全相同的 dimByChannel 和 groupAvgChan，然后没有将它们用于任何事情。

dc.js：点击过滤并重绘图表

dc.js: filter & redraw chart on click

crossfilter

dc.js