Создавая "живой" график с D3

Недавно я начал учиться использовать фреймворк D3.js и, хотя кажется, что он был предназначен для того, чтобы делать именно то, что я хочу, я не могу найти простой пример "живого" графика обновления.

Я ищу что-то вроде линейной диаграммы, которая обновляется по мере поступления новых данных. Новые данные будут получены либо путем ввода json-url с "последней видимой" временной меткой, либо каким-либо другим методом AJAX-y.

edit: часть ответа D3 здесь:

http://bost.ocks.org/mike/path/

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

Ответы

Ответ 1

Этот учебник поможет вам в создании графического графика в реальном времени: http://bost.ocks.org/mike/path/

Я хотел бы добавить еще несколько комментариев:

Асинхронные данные

Когда вы делаете график в реальном времени, вы часто получаете данные асинхронно, поэтому вы не можете знать точное время между каждой "точкой".

  • Для строки вам повезло, потому что line, описанный в учебнике, не заботится об этом.
  • В течение продолжительного эффекта плавного перехода это сложнее. Ключ состоит в том, чтобы установить продолжительность как время между последним кадром и предыдущим. Это также хорошее приближение для следующего, так как сеть почти всегда имеет одинаковую пропускную способность.

Ось оси

На обычном линейном графике легко определить область y. Однако с данными в реальном времени значение y может часто ограничиваться. Вот почему я бы рекомендовал вызывать функцию для установки домена y на каждой итерации. Вы также можете создать ограничивающий прямоугольник.

Производительность

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

Ответ 2

Возможно, этот плагин также может быть интересным: Cubism.

Cubism.js - это плагин D3 для визуализации временных рядов. Используйте кубизм для создавать лучшие панели управления в реальном времени, извлекать данные из Graphite, Cube и другие источники. Кубизм доступен под лицензией Apache по GitHub.

изменить:

Другим интересным проектом может быть Rickshaw, который также использует D3.

Инструментарий JavaScript для создания интерактивных графиков реального времени

См. этот пример: Случайные данные в будущем

Ответ 3

Это всего лишь два примера:

  • Вы можете сделать клиент вытащить новые данные с сервера через равные промежутки времени (т.е. использовать некоторые вызовы AJAX).
  • Если браузер поддерживает его, вы можете открыть websocket по отношению к серверу, чтобы сервер мог напрямую нажимать новые данные, как только они будут доступны.

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

В любом случае библиотека d3.js не участвует в том, как вы получаете данные, а вместо этого в том, как вы их показываете.