Улучшение производительности d3?

Question

У меня есть некоторые проблемы с производительностью d3.js для отображения точек на карте.

Я использую этот прекрасный кусок кода, который я нашел здесь в качестве отправной точки для моего кода https://gist.github.com/bobuss/1985684

По сути, код ссылки делает рисование точек на картах и ​​кривых для соединения линий. Однако, когда я попытался добавить больше точек данных (около 300), это каким-то образом либо привело к сбою в работе моего браузера, либо к задержке ALOT.

Так что мне было интересно, есть ли способ улучшить производительность в этом случае?

Спасибо!

Answer 1

Я рассмотрел использование d3, чтобы показать некоторые геномные данные (23k точек на диаграмме рассеяния).

Это просто не могло работать, большая часть браузера зависала, когда вы добавляете 23k dom узлов, и если вы пытаетесь иметь некоторую интерактивность (зависание, щелчок), у вас получается слишком много слушателей событий, и все умирает.

Мне нравится d3, я использую его с первых дней существования Provisis, но, по моему опыту, он стал непригодным после нескольких тысяч элементов, и каждый раз, когда мне приходилось создавать такие диаграммы, я заканчивал тем, что строил их с нуля и реализовывал на холсте. И тут вы сталкиваетесь с совершенно новым набором проблем - осуществлением собственных тестов попаданий, событий, имитацией зависания...

Это кошмар.

В JS нет хорошего решения для построения диаграмм "больших данных", по крайней мере, насколько мне известно.

И, честно говоря, обидно, что мой MacBookPro вращает свой вентилятор на максимальной скорости, а браузеры не отвечают - потому что я пытаюсь построить 25 тыс. Точек - на i7 8 ГБ оперативной памяти, это чепуха.

Но это то, что мы получаем, когда пытаемся использовать браузер для чего-то, чего не должно быть. И да, 2D ускорение GPU помогло, но не так сильно.