Сколько может масштабировать d3 js
Я пытаюсь построить сетевой график (например, сеть для мозга) для отображения миллионов узлов. Я хотел бы знать, в какой степени я могу подтолкнуть d3 js с точки зрения добавления большего количества узлов сети на одном графике?
Как, например, http://linkedjazz.org/network/ и http://fatiherikli.github.io/programming-language-network/
Я не очень знаком с d3.js (хотя я являюсь разработчиком JS), я просто хочу знать, является ли d3.js правильным инструментом для построения масштабной сетевой визуализации (один миллион узлов +), прежде чем я начну смотреть на некоторые другие инструменты.
Мои требования просты: создать интерактивную веб-визуализацию сети, которая может масштабироваться
3 ответа
Сделав небольшой поиск, я нашел следующий тест производительности D3.
Будьте осторожны, я заблокировал несколько вкладок своего браузера, пытаясь довести это до предела.
Дальнейшие поиски привели меня к возможному решению, где вы можете предварительно визуализировать серверную часть диаграмм d3.js, но я не уверен, что это поможет в зависимости от желаемого уровня взаимодействия.
Это можно найти здесь.
"Масштабирование" на самом деле не абстрактный вопрос, все зависит от того, сколько вы хотите сделать и какое у вас оборудование. Вы определили одну переменную: "миллионы узлов". Итак, следующий вопрос: на каком оборудовании это будет работать? Если ответ "все, что попадает на мой сайт", ответ "нет, он не будет масштабироваться". Не с d3 и, вероятно, ни с чем. Недорогие смартфоны не будут обрабатывать миллионы узлов. Если ответ "рабочие станции высокого класса", ответ "возможно".
Единственный способ узнать наверняка - взять самый дешевый профиль оборудования, которое вы планируете поддерживать, и протестировать его. Можете ли вы гарантировать пользователям доступ к 16-гигабайтной рабочей станции 64 ГБ? 8GB 2-ядерный ноутбук? Что бы это ни было, загрузите страницу с максимальным количеством узлов и нарисуйте что-нибудь, чтобы смоделировать требования типа взаимодействия, который вы хотите, и посмотреть, работает ли он.
Масштаб d3 очень зависит от того, как вы его используете.
Если вы используете d3 для рендеринга большого количества элементов svg, браузеры начнут испытывать проблемы с производительностью в верхних тысячах элементов. Вы можете отрендерить до 100 тыс. Элементов до того, как браузер выйдет из строя, но на этом этапе взаимодействие с пользователем практически бесполезно.
Однако можно рендерить множество линий или кругов с помощью холста. На холсте все отображается в одном файле изображения. Вместо того, чтобы создавать новый элемент для каждого узла или линии, вы рисуете линию в файле изображения для него. Недостатком этого является то, что анимация немного сложнее, так как вы не можете перемещать элементы на холсте, только рисовать поверх холста или перерисовывать все целиком. Это не невозможно, но вычислительно дорого с миллионом узлов.
Поскольку холст не имеет узлов, если вы хотите использовать с ним парадигму ввода / выхода / обновления, вы должны поместить элементы-заполнители в DOM. Вот хороший пример того, как это сделать: DOM-to-canvas с D3.
Поскольку стоимость памяти для canvas не зависит от количества узлов, это делает ее очень масштабируемой для больших визуализаций, но для ее интерактивности необходимы обходные пути.