Как отложить перерисовку графика?

Question

У меня есть «график», который является полем ввода, используемым для фильтрации других графиков (фильтр учитывает только данные, содержащие текст, введенный в поле.

Это прекрасно работает, но когда вы смотрите для фильтрации по слову (например, «тест», он будет фильтровать по t, затем te, затем tes, затем тестировать) и перерисовывать графики 4 раза, и он чувствует себя немного вяло, особенно на смартфонах.

Есть ли чтобы задержать рисование графиков за несколько мс, чтобы убедиться, что лишняя буква не набрана?

В идеале я хотел бы отфильтровать каждую букву и нарисовать быстрые графики (например, отобразить dataCount) и подождать бит до привлечение других (например. пузырьковая диаграмма или линейная диаграмма, которая, как представляется, больше связана с процессором).

Есть ли простой способ сделать это?

Связанный вопрос: имело бы смысл добавить это поле ввода «graph 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.