Ответ 1
Итак, лучший ответ, который я нашел, - это /examples/zoom/zoom.html файл в сам репозиторий D3. Не линейный график, но легко адаптируемый.
Масштабируемый, графический график временных рядов Google-Finance в D3 или Rickshaw?
Я хочу создать линейный график временных рядов в D3, с меньшей версией графика ниже, который позволяет пользователю увеличивать масштаб на некоторых участках диаграммы, например Google График финансов.
Самый близкий пример, который я нашел, - это плавающая диаграмма:
Есть ли у кого-нибудь примеры этого с линейным графиком в D3?
NB: я определенно хочу небольшую версию графика с масштабируемой кистью сверху, а не просто перетаскиваемую/масштабируемую ось х, например этот пример.
В идеале я бы хотел использовать Rickshaw, но примеры Rikshaw похоже, имеют ползунок диапазона. Таким образом, пример Рикши будет еще лучше.
Ответы
Ответ 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.