Большой d3.js график, холст или рендеринг на стороне сервера?

Я использую d3.js для визуализации данных timeseries-данных, отправленных с моего бэкэнда python (через Websocket). Обычный объем данных для одного графика составляет около 120 записей (2 часа данных, 1 запись за минуту). Это работает нормально, обновляется каждую минуту.

Но он также должен быть способен визуализировать данные с месяца или более (может быть до года), также в 1-минутном интервале. Предоставление такого количества данных слишком велико для SVG.

Я думаю о следующих альтернативах:

  • Оказание этого в холсте. Это действительно намного быстрее?
  • Переключение в другую библиотеку, например Highchart.js (пила демо с ~ 50 тыс. Записей)
  • Отображение SVG / JPG / PNG на сервере. Любой опыт по рендерингу d3.js на стороне сервера, например phantom.js? Я хотел бы повторно использовать уже написанные графические модели. Но это также может быть любая другая библиотека, которая может отображать данные (генерировать графики с помощью python)

Чтобы вы посоветовали?

One Solution collect form web for “Большой d3.js график, холст или рендеринг на стороне сервера?”

Обратите внимание: d3 поддерживает использование буферизованных массивов javascript. Графики SVG с тысячами точек данных временных рядов отлично работали в моем опыте (даже с несколькими источниками потоковой передачи данных в реальном времени при обновлениях через 20 мс через веб-порты).

Например, если вы упаковываете все свои данные в Python; вам может не понадобиться делать это в режиме реального времени, так как скорость обновления относительно медленная:

import struct # fake data point p = [56435367, 200, 1] # <=little endian, d=float64 (for time), d=float64 msg_str = struct.pack('<' + 'd' * len(p), *p) print(msg_str) b'\x00\x00\x008\x15\xe9\x8aA\x00\x00\x00\x00\x00\x00i@\x00\x00\x00\x00\x00\x00\xf0?' 

Затем через ваш websocket, который попадает на javascript, где вы можете сделать что-то вроде:

 this.ws.onmessage = function(e){ // Just pump the raw bytes straight into CircularBuffer graph.databuffer.push(e.data); ... 

И когда вы хотите построить график, предполагая, что g – это ваша ссылка на D3 svg:

 // Get a Float64Array containing all the values var series_data = graph.databuffer.get_array_stream(); g.attr("d", graph.line(d3.zip(time, series_data))); 

Естественно, это должно быть еще проще, если у вас есть все данные заранее. Возможно, вы планируете создавать точки вместо одного пути? Я обнаружил, что браузеры борются с заговором десятков тысяч отдельных кругов (особенно, если все они перемещаются каждые 20 мс!), Но они могут легко справиться с этим путем.

  • Heatmap в matplotlib с векторным форматом
  • Цвет фона модуля svgwrite Python
  • Форматы изображений PySide SVG не найдены?
  • SVG-рендеринг в приложении PyGame
  • Данные веб-соскабливания с интерактивной диаграммы
  • интерактивный _standalone_ вывод от matplotlib
  • Как визуализировать * части * файла svg?
  • Реализация кривых дуги SVG в Python
  • Python - лучший язык программирования в мире.