Как сделать плавные переходы между диаграммами dc.js, если у меня карта с более чем 20k точками? - PullRequest
Новая
       22

Как сделать плавные переходы между диаграммами dc.js, если у меня карта с более чем 20k точками?

1 голос
/ 08 ноября 2019

Недавно я создал уменьшенную версию прототипа проводника данных, включающего crossfilter, dc.js и leaflet.markerCluster. Маленькая версия ( прототип панели инструментов ) работает правильно. Проблема, с которой я сталкиваюсь, заключается в том, что я пытаюсь увеличить его до 20 тыс. Точек или более.

Диаграммы по-прежнему отображаются правильно, и карта работает для плавного обновления диаграмм при масштабировании или панорамировании, но когда я взаимодействую сНа одном из графиков переходы между другими графиками более не являются плавными. Они переходят на следующую позицию, а не плавно переходят.

Я попытался удалить карту, и это снова вернуло переходы между другими графиками в хороший плавный переход.

Мне интересно, не затрачивает ли процесс повторного рендеринга 20 тыс. Баллов каждый раз, когда происходит взаимодействие.

Если у кого-нибудь есть какие-либо предложения относительно того, где я мог бы найти решение, яБуду благодарен.

1 Ответ

0 голосов
/ 08 ноября 2019

Спасибо за публикацию блока, который облегчает тестирование.

Я смоделировал намного больше точек, сгенерировав 200 строк для каждой из ваших ~ 46 тыс. Строк. Я видел только небольшое заикание при 100x ~ 23k строках (iMac 2017 с большим количеством оперативной памяти).

Известно, что Leaflet.markercluster работает медленнее с более чем 10K точками . С 46k строками Leaflet.markercluster потребовалось около 475 мсек, чтобы очистить и добавить слои Leaflet:

markercluster flame chart

Поскольку в JavaScript есть только один поток (если тольковы используете рабочих), D3 должен получать тайм-ауты (на самом деле requestAnimationFrame) каждые 16 мс или около того, чтобы создать плавную анимацию.

Один из способов - отложить карту, перерисовывающую 500 мс, пока другие не закончили: 

  dc.override(mapChart, 'redraw', function() {
      window.setTimeout(() => mapChart._redraw(), 500);
  });

Вилка вашего блока с обходным решением .

Конечно, это также заставляет карту перерисовываться на 500 мс дольше. И если вы щелкнете достаточно быстро, последняя перерисовка карты все еще будет выполняться, когда она будет пытаться нарисовать диаграммы.

Вы также можете попробовать опцию chunked addLayers , но я думаю, что у вас будетустановить chunkedInterval настолько низким, чтобы он также замедлял markerclusters.

Эффективная обработка этого большого количества данных возможна в JavaScript - очевидно, у crossfilter нет проблем. Я не знаю, является ли алгоритм уединения слишком дорогим. Кто-то в этом вопросе предложил предварительно объединить баллы, но я думаю, это будет означать, что вы не сможете увидеть отдельные баллы.

...