Масштабируемый, графический график временных рядов Google-Finance в D3 или Rickshaw?

Я хочу создать линейный график временных рядов в D3, с меньшей версией графика ниже, который позволяет пользователю увеличивать масштаб на некоторых участках диаграммы, например Google График финансов.

Самый близкий пример, который я нашел, - это плавающая диаграмма:

http://bl.ocks.org/1962173

Есть ли у кого-нибудь примеры этого с линейным графиком в D3?

NB: я определенно хочу небольшую версию графика с масштабируемой кистью сверху, а не просто перетаскиваемую/масштабируемую ось х, например этот пример.

В идеале я бы хотел использовать Rickshaw, но примеры Rikshaw похоже, имеют ползунок диапазона. Таким образом, пример Рикши будет еще лучше.

Ответ 1

Итак, лучший ответ, который я нашел, - это /examples/zoom/zoom.html файл в сам репозиторий D3. Не линейный график, но легко адаптируемый.

Ответ 2

NVD3 - это очень классный проект с числом многократных графиков, написанных на D3. См. здесь для примера линейной диаграммы с видоискателем вместе с исходным кодом.

Обновление: Пример NVD3 теперь также ссылается на пример Майка Бостока (создателя D3), который демонстрирует аналогичную функциональность, способность для увеличения/фокусировки на выбор данных, реализованный исключительно с D3.js.

Ответ 3

dygraphs делает именно то, что вы хотите в этой демонстрации:

http://dygraphs.com/gallery/#g/range-selector

Ответ 4

Как насчет HighStock, HighCharts менее известный родной брат?

Ответ 5

Я знаю, что вы намерены использовать D3, но Humble Finance заслуживает упоминания, поскольку он делает именно то, что вы хотите, просто javascript и холсты.

Если вы действительно намерены использовать D3, я думаю, вам нужно будет создать что-то свое, что должно быть пустой тратой времени, учитывая, насколько хороши и подходят скромные финансы.

Совет для тестирования Humble Finance: в zip-загрузку не входит flotr2, который он требует, однако его можно легко загрузить из здесь (очевидно вам необходимо добавить необходимые файлы flotr2 в папку Humble Finance в нужном месте).

Edit:

Игнорируйте Humble Finance, я пробовал использовать его много, и это заставило меня обогнуть. База кода казалась довольно запутанной, и вам пришлось в конечном итоге добавить многие библиотеки на свою страницу, чтобы заставить ее работать, поэтому очень сложно внести незначительные изменения в диаграмму. Я теперь использую D3, но я обнаружил, что SVG слишком медленно отображается с лотами (лотами и лотами) точек на кривой. Я закончил тем, что использовал D3 для рисования осей, настройки весов и визуализации изменения времени и рисования кривой с использованием холста. Кажется, это работает очень хорошо. Извините, у меня нет примера в любом месте.

Ответ 6

Возможно, я немного опаздываю на вечеринку, но недавно г-н Босток недавно представил отличный пример того, что вы ищете.

Ответ 7

Вы видели Crossfilter? Другое предложение, основанное на D3, которое имеет сходные свойства с интерфейсом Google Finance.

Ответ 8

Я не знаком ни с одной из фреймворков, о которых вы упомянули, но задался вопросом, можно ли вместо этого использовать google charts? Используя это, вы сможете делать то, что они делают в финансах Google, и пример того, как это сделать, может быть взят с их сайта.

Если вы ищете другие фреймворки для изучения, я могу рекомендовать Emprise Charts - я уверен, что вы сможете сделать что-то подобное там, и их команда разработчиков очень полезна.

Ответ 9

Рикша теперь поддерживает это!

Смотрите example и Rickshaw.Graph.RangeSlider.Preview.