d3 - Постепенно нарисуйте большой набор данных

Question

Я использую d3.js для построения содержимого строки 80000 строк .tsv на диаграмме.

Проблема, с которой я сталкиваюсь, заключается в том, что, поскольку имеется так много данных, страница перестает отвечать на запросы в течение 5 секунд, пока весь набор данных сразу перевернут.

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

Answer 1

Я думаю, вам придется разбивать ваши данные и отображать их в группах с помощью setInterval или SetTimeout. Это даст UI некоторую передышку, чтобы прыгать посередине.

Основной подход: 1) порций набора данных 2) оказывать каждый кусок отдельно 3) следить за каждую оказанную группу

Вот пример:

var dataPool = chunkArray(data,100); 
function updateVisualization() { 
    group = canvas.append("g").selectAll("circle") 
    .data(dataPool[poolPosition]) 
    .enter() 
    .append("circle") 
    /* ... presentation stuff .... */ 

} 

iterator = setInterval(updateVisualization,100); 

Вы можете увидеть демо скрипку этого - сделано, прежде чем я имел кофе - здесь:

http://jsfiddle.net/thudfactor/R42uQ/

Обратите внимание, что я создаю новую группу с ее собственным объединением данных для каждого массива массива. Если вы продолжаете добавлять к одному и тому же соединению данных со временем (данные (oldData.concat (nextChunk)), весь набор данных по-прежнему обрабатывается и сравнивается, даже если вы используете только выбор enter(), поэтому он не принимает чтобы начать сканирование.