dc.js: фильтр и диаграмма перерисовывания по клику

Question

Я визуализировал штабелированную панель, а затем я пытаюсь повторно рисовать диаграмму с помощью нового фильтра при нажатии кнопки. Теперь, когда я нажимаю кнопку, предыдущие оси остаются, но диаграмма исчезает и не перерисовывается. Я не знаю, чего мне здесь не хватает. Вот JSFiddle для этого stackedBar.

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, и все будет отрываться оттуда. Лучший способ для отладки такого рода вещей

1. поставить точку останова на перерисовку, чтобы увидеть, какие значения находятся в группе
2. пут точек останова внутри функций уменьшить, чтобы увидеть, что пошло не так в расчет.

Изменение функции reduceRemove использовать

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

, кажется, решить эту проблему (по крайней мере, есть еще бары после нажатия кнопки).

вилка вашей скрипки: http://jsfiddle.net/gordonwoodhull/0vvh1xex/6/

Я также добавил elasticY(true), чтобы иметь возможность увидеть изменения лучше. И да, восходящий переход на барах здесь особенно ошибочен; если вы можете перейти на dc.js 2.0 (который находится на бета-версии 6), это исправлено.

Примечание: у вас есть код ошибки внутри myFunc: похоже, что вы воссоздаете dimByChannel и groupAvgChan точно так же, а затем не используете их ни для чего.