如何延迟图形重绘？

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的一些智慧。