如何延迟图形重绘？

Question

我有一个 "graph" 是一个输入字段，用于过滤其他图表（过滤以仅考虑包含输入到该字段中的文本的数据。

它工作正常，但是当你想过滤一个词时（例如 "test"，它会过滤 t，然后是 te，然后是 tes，然后是 test）并重新绘制图形 4 次，它感觉有点迟钝，尤其是在智能手机上。

有没有办法将图形的绘制延迟几毫秒，以确保不会输入额外的字母？

理想情况下，我想过滤每个字母并绘制快速图形（例如显示数据计数）并在绘制其他图形之前稍等片刻（例如气泡图或折线图似乎更 cpu绑定）。

有简单的方法吗？

相关问题：将该输入字段 "filter graph" 作为新图形类型添加到 dc 中是否有意义？

Answer 1

对于问题的第一部分，您正在查找的功能称为 "throttling"。在其他地方有 implementation of it in underscore 和 lodash。

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

至于只绘制部分图表，您可以让 "filter graph" 设置交叉过滤器维度过滤器，然后只重绘部分图表，然后等待受限事件重绘其余图表，因为 redrawAll 实际上只是遍历所有图表。

不过，没有任何内置功能可以管理这些类型的子组，因此您必须保留自己的图表列表。

即类似的东西（可能在这里修改 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 中有一个像这样的简单输入小部件会很棒 - 不过我不确定如何以一般方式处理 fast/slow 重绘。它可以将一些智慧打包成答案 like the responses to this issue。

如何延迟图形重绘？

How to delay the graph redraw?

dc.js