D3 сила направленного графа с изображениями на холсте

Question

Я пытаюсь улучшить свою силу направленного графика D3. В настоящее время он использует элементы SVG, но как только количество узлов достигает 500, а ссылки ~ 2000, это становится практически невозможным. Я рассматриваю некоторые альтернативные способы рендеринга графика.

Холст, кажется, хороший вариант: http://bl.ocks.org/mbostock/3180395

Но можно прикрепить изображения к узлам на холсте, как это сделано здесь: http://bl.ocks.org/eesur/be2abfb3155a38be4de4

Благодарности

Answer 1

Вы можете использовать drawImage(). Вот some documentation

И да, холст - хороший подход или ускорение - разум. Сама компоновка сидений берет кучу циклов процессора независимо от того, как вы ее визуализируете, и ваши цифры уже достаточно высоки для этого. Кроме того, при рендеринге 500 кругов в холст со скоростью 60 кадров в секунду (fps = кадры в секунду) должно быть выполнимо, добавление 2000 ссылок дополнительно начнет замедлять работу. Тем не менее, это будет намного лучше, чем SVG.

Для того, чтобы узнать, является ли - и насколько - ваши оптимизации улучшают производительность, следует использовать что-то вроде stats.js