如何延遲圖形重繪？

Question

我有一個「圖形」，它是一個輸入字段，用於過濾其他圖形（過濾器只考慮包含輸入到該字段的文本的數據）

它工作正常，但是當你正在尋找（如「測試」，它會過濾t，然後te，然後測試，然後測試）並重繪圖表4次，感覺有點呆滯，尤其是在智能手機上。我想過濾每個字母，並繪製快速圖形（例如顯示dataCount），並等待一個字母，然後等待位之前繪製其他（例如。氣泡圖或似乎更受cpu限制的線圖）。

有沒有簡單的方法來做到這一點？

相關問題：將輸入字段「filter graph」作爲新圖類型添加到dc是否有意義？

Answer 1

對於問題的第一部分，您正在查看的功能稱爲「節流」。有一個implementation of it in underscore和lodash等地。

（不要使用dc.events.trigger，because it's a debounce）

至於繪圖只是一些圖表，你可以有你的「過濾器圖」設定的crossfilter維度篩選，然後重繪只是一些圖表，並然後等待扼殺事件重繪其餘部分，因爲redrawAll確實只是遍歷所有圖表。

雖然沒有內置的管理這些類型的子組，但您必須保留自己的圖表列表。

I.e.像（可能改寫（munging）D3和jQuery語法這裏，但你的想法）：

function fast_redraws() { 
    [chart1,chart2,chart3].forEach(function(c) { c.redraw(); }); 
} 
function slow_redraws() { 
    [chart4,chart5,chart6].forEach(function(c) { c.redraw(); }); 
} 
var throttle_slow_redraws = _.throttle(slow_redraws, 100, {leading: false}); 
input.on('change', function() { 
    dimension.filter(input.val()); 
    fast_redraws(); 
    throttle_slow_redraws(); // throttling makes this okay 
}) 

是的，這將是巨大的，有一個簡單的輸入控件像這樣dc.js - 我不知道但是，如何以一般方式處理快速/慢速重繪。它可以打包答案like the responses to this issue的一些智慧。