Эффективное масштабирование диаграммы рассеяния D3 (реализация React D3)

#reactjs #d3.js

#reactjs #d3.js

Вопрос:

Я создаю интерактивную диаграмму рассеяния из n точек, используя D3 и React, и я хочу включить масштабирование / панорамирование.

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

Значение n для моего текущего набора данных составляет около 3000 точек (и оно отстает), однако я ищу подход, который масштабируется до ~ 1 миллиона точек.

Какое обычно наибольшее количество точек данных можно визуализировать с помощью D3, не вызывая задержки страницы? Есть ли эффективный способ добиться этого?

Комментарии:

1. На мой взгляд, миллион точек данных на диаграмме рассеяния — это слишком много. Посмотрите, как преобразовать его в график плотности или тепловую карту, подобную этой d3-graph-gallery.com/density2d.html

2. @SimonD Один недостающий элемент в моем вопросе заключается в том, что это будет интерактивная визуализация, а не просто представление (и в этом случае ваша идея была бы отличной). Я нашел оболочку поверх D3, которая использует WebGL для более быстрой обработки ( D3FC ). Я пытаюсь понять и воссоздать этот пример прямо сейчас.