Как стать автором
Обновить

Комментарии 21

НЛО прилетело и опубликовало эту надпись здесь

Исправил, спасибо

простите за прямоту, но по вашей ссылке — «бюростат», визуально — интересно, но, что с этим делать, использовать, я думаю — совсем бесполезно.
Сравнения ради, насколько трудозатратно на D3 сделать линейный график с полной закраской диапазонов по оси Х? Пример

Я специально вначале написал, что «D3 это не простая библиотека, где вызов функции с нужной конфигурацией строит график. D3 это набор инструментов для визуализации данных.»


Для совсем простых графиков D3 слишком исчерпывающее решение. Но чем сложнее должна быть визулизация, тем легче писать ее на D3. Посмотрите сколько всего интересного можно сделать: https://github.com/d3/d3/wiki/Gallery, https://datalaboratory.ru/.


Описал как сделать график с заливкой.
http://jsbin.com/wetiqiyare/1/edit?html,js,output

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

Вы знаете, проще найти готовый, чем спрашивать. Вот примерно тут живут примеры https://bl.ocks.org/mbostock (это конкретно Майк, сам автор). Там диаграмм — десятки в самых разных видах.


Просто линейный график — это path в SVG, он прост (и выбор тут скорее между вариантами интерполяции, т.е. строить ли ломаную, или сглаживать ее сплайном, и т.п.).


А раскрашенные диапазоны — это просто прямоугольники. Все что вам нужно — это определить их число, и вычислить размеры (с учетом масштаба, через scale), и цвета.


Ну и понять, в первую очередь, какой у вас вообще масштаб, т.е. не логарифмический ли он, например. А дальше все прямолинейно. Причем заметьте, что scale умеет масштабировать и такие экзотические вещи, например, как цвета — т.е. вы можете создать функцию, которая отображает диапазон [0,1] на [красный, зеленый]. В любой цветовой модели, ну почти. Так что цвет раскраски тоже можно рассчитать, без усилий.

Думаю для таких случаев проще использовать C3.js. Пример, похожий на приложенное Вами изображение.
Я бы добавил что у D3.js проблемы с совместимостью между версиями. Примеры и решения на разных версих (3й и 4й) приходится долго адаптировать.

Любую смену мажорных версий сложно адаптировать.


Я тоже столкнулся с этим, начиная писать инфографику на 3 версии и мучительно переводя впоследствии её на 4.

Ну, тут все же вышел перебор. Посмотрите, из любопытства, на специализированные фреймворки построения диаграмм на базе d3. Многие из них, такие как c3, nvd3, и другие (я смотрел таких с десяток наверное) конкретно застряли на v3, и не могут уже годы перейти на v4. Ну т.е. понятно что это не просто — но об этом плохо подумали.

70 тысяч звездочек на гитхабе

И всего лишь 2 issue. Вот так действительно пример хорошо сделанной библиотеки.
Просто ее сейчас раздербанили на много модулей и каждый модуль в отдельном репозитории.

Число issue — совсем не показатель качества. Может, люди просто не знают, куда слать репорты. Или у автора есть бот, автоматически закрывающий все тикеты по кд.


Судя по таким комментариям-копипастам, я склоняюсь к версии про бота.

Вы о чем? Откройте d3-scale, это отдельный модуль. 22 открытых, 69 закрытых. Нормальное такое немаленькое число задач. В других — аналогично, уж поверьте.

Чем-то напомнило визуализацию GitHut от Carlo Zapponi.
Добавить отметки на осях позволяет модуль d3-axis. Буквально в две строчки.

Ну, это вы преувеличили :) На самом деле, это стандартный случай. Нестандартный, как обычно, может вылиться в любое число строк кода.


Например, представьте, что у вас по оси X текстовые метки. Месяцы там, или категории чего-либо. И они очень часто не влезают в ту ширину, которая им отводится между тиками. И если автор d3-axis это не предусмотрел, то… вам не повезло.


Хотя, ради объективности, надо сказать, что если элементы, из которых формируется ось, т.е. тики, текст к ним, и пр., спроектированы хорошо, то есть снабжены классами, то вы можете все же написать функцию, которая, например, повернет надписи вертикально, подвинет их по горизонтали или вертикали, лесенкой, и сделает много чего еще.

Можете подсказать ещё каких-нибудь обучающих/вводных материалов для начала работы с d3?

Мне очень помог сайт http://alignedleft.com/tutorials/d3, и вот его перевод, если нужен — http://serganbus.github.io/d3tutorials/. Получил там понимание как начать работать, а дальше уже искал конкретные методы для разных потребностей.
Спасибо
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории